vue中路由的基本使用

Posted 2021-02-13 mushitianya

路由的使用步骤：

• 安装: npm i -S vue-router
• 引入 vue-router
• 创建路由规则
• 将路由实例与vue实例关联到一起
• 配置路由规则
  哈希值 和 组件 的对应关系
• 指定路由出口（ 表示将当前匹配的路由展示在页面中的哪个位置 ）

  <div id="app">
    <ul>
      <li>
        <!-- 入口：实际上就是一个a标签 -->
        <router-link to="/home">首页</router-link>
      </li>
    </ul>

    <!-- 指定路由出口 -->
    <router-view></router-view>
  </div>

  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
    const Home = Vue.component('home', {
      template: `
        <h1>这是 Home 组件</h1>
      `
    })

    // 创建路由实例
    const router = new VueRouter({
      routes: [
        { path: '/home', component: Home }
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {

      },
      // 将路由与实例关联到一起
      router
    })
  </script>