概念

1. 路由就是一组 key-value 的对应关系。

2. 多个路由需要经过路由器的管理。

3. 路由 Route 路由器 Router

   

安装 vue-router 插件

npm i vue-router@3	// Vue2 写法

创建 router 配置文件

1. 创建 src/router/index.js 文件。

2. 初始代码如下：

   // 引入路由器
   import VueRouter from 'vue-router';
   
   // 引入参与路由的组件
   import About from '../components/About';
   import Home from '../components/Home';
   
   // 创建并暴露 router 实例，用于配置一组一组的路由。
   export default new VueRouter({
       routes: [
           {
               path: '/home',
               component: Home
           },
           {
               path: '/about',
               component: About
           }
       ]
   })

3. 在 new VueRouter 实例是传入的 routes 表示一组一组的路由匹配规则。

4. path 表示路由路径，与导航标签结合使用。

5. component 表示路由对应的组件。

使用路由

配置 main.js 文件

import Vue from 'vue'
import App from './App.vue'

// 引入 VueRouter 包
import VueRouter from 'vue-router';

// 引入 router 配置文件
import router from './router';

Vue.config.productionTip = false;

// 应用 VueRouter 插件
Vue.use(VueRouter);

new Vue({
  render: h => h(App),
  router		// 加入全新配置项，配置信息已在 src/router/index.js 文件中编写。
}).$mount('#app')

导航标签

1. 导航标签： <router-link></router-link>

2. 标签属性

   • active-class：当前导航项选中的样式。
   • to：路由跳转的路径，属性值是在 src/router/index.js 文件的 routes 中配置的。

3. App.vue

   <template>
       <div class="app">
           <ul class="nav">
               <li><router-link active-class="active" to="/home">Home</router-link></li>
               <li><router-link active-class="active" to="/about">About</router-link></li>
           </ul>
           <div class="content">
               <router-view></router-view>
           </div>
       </div>
   </template>
   
   <script>
       export default {
           name: 'App',
       };
   </script>

视图标签

1. 视图标签：<router-view></router-view>
2. 作用：路由对应组件显示的位置。

注意事项

组件目录

1. 组件分为两种：一是一般组件；二是路由组件。所谓的路由组件就是参与路由的组件。
2. 为了区分这两种组件，通常情况下会把一般组件放在 /src/components 文件夹下，路由组件放在 /src/pages 文件夹下。

非选中路由组件的状态

1. 在很多路由中，一般情况下有且只有一个被选中，备选中的组件叫选中路由组件，其他路由组件称为非选中路由组件。
2. 选中与非选中路由组件在切换路由时它们在频繁的挂载和销毁。这个可以借助 mounted 和 beforeDestroy 这两个钩子去证实。

vc 新增属性

1. 每个路由组件身上都会多两个数据，一个是 $route，另一个是 $router
2. $route 是组件自身的路由配置信息。
3. $router 整个项目的路由信息，每个路由组件上的 $router 的值都相同。