vue-router的基本使用

vue-router介绍

1. vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用
2. 我们可以访问其官方网站对其进行学习： https://router.vuejs.org/zh/
3. vue-router是基于路由和组件的
   1. 路由用于设定访问路径，将路径和组件映射起来
   2. 在vue-router的单页面应用中，页面的路径的改变就是组件的切换

安装vue-router

1. 安装vue-router：npm install --save vue-router
2. 使用版本
   1. Vue2使用vue-router@3.xx.xx版本
   2. Vue3使用vue-router@4.xx.xx版本

配置vue-router

1. 第一步：导入路由对象，并且调用Vue.use(VueRouter)
2. 第二步：创建并导出路由实例，并且配置路由映射（配置路由和组件之间的映射关系）
3. 第三步：在Vue实例中挂载创建的路由实例

   import Vue from 'vue'
   // 导入路由对象
   import VueRouter from 'vue-router'
   
   // 使用路由
   Vue.use(VueRouter)
   
   // 创建并导出路由实例
   export default new VueRouer ({
       // 配置路由映射
       routes: [
           {
               // 配置路径
               path: '/about',
               // 导入路由组件
               component: () => import('../views/About.vue')
           },
           ...
       ]
   })
   
   
   // 在mian.js中将router进行挂载
   import router from './router'
   
   new Vue({
     router,
     store,
     render: h => h(App)
   }).$mount('#app')
   

使用vue-router

1. 使用路由 — 通过<router-link>和<router-view>
   1. <router-link></router-link>：该标签是一个vue-router中已经内置的组件，它最终会被渲染成一个标签，该标签内使用to属性来指定跳转路径
   2. <router-view></router-view>：用于指定组件的展示位置。当路由跳转时，该路由对应的组件就会在该位置渲染，替换掉<router-view></router-view>

      <router-link to="/about" active-class="active"></router-link>
      <router-view></router-view>
      
      // css样式，当标签中to属性指定的路由被使用时有效
      .active {
          ...
      }
      

router-link补充

1. <router-link>有关属性的补充
   1. to — 用于指定跳转的路径
      • 例：<router-link to='/home'>
   2. tag — tag可以指定<router-link>之后渲染成什么组件（比如按钮）
      • 例：<router-link to='/home' tag='button'>
   3. replace — 用于控制路由跳转时操作浏览器历史记录的模式
      1. 浏览器历史记录有两种写入方式：push和replace；push为追加历史记录，replace为替换当前记录，默认为push，使用replace属性则开启replace模式
      2. 例：<router-link to='/home' tag='button' replace>
   4. active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的类名，设置active-class的属性值可以修改默认类名
      • 可以通过router-link-active类名给被正在使用路由的<router-link>标签书写css样式设置点击特效，如字体变色

多级路由

1. 实现嵌套路由有两个步骤：
   1. 创建对应的子组件，并且在路由映射中配置对应的子路由
   2. 在组件内部使用<router-view>标签
2. 配置路由规则，使用children配置项
3. 在子路由中的path配置项中，配置的路径不要加/

   routes: [
       {
           // 配置路径
           path: '/about',
           // 导入路由组件
           component: () => import('../views/About.vue'),
           children: [
               {
                   path: 'user', // 此处千万不要写：/user
                   component: () => import('../views/user.vue')
               }
           ]
       },	
       ...
   ]
   

4. <router-link></router-link>中to指定的路径必须要写完整路由路径

   <router-link to="/about/user"></router-link>
   

命名路由

1. 作用：可以简化路由的跳转
2. 使用代码如下：

   routes: [
       {
           // 给该路由命名为guanyv
           name: 'guanyv',
           path: '/about',
           component: () => import('../views/About.vue')
       },	
       ...
   ]