Vue Router的使用（插件）

功能

  1. 嵌套路由映射
  2. 动态路由选择
  3. 模块化、基于组件的路由配置
  4. 路由参数、查询、通配符
  5. 展示由 Vue.js 的过渡系统提供的过渡效果
  6. 细致的导航控制
  7. 自动激活 CSS 类的链接
  8. HTML5 history 模式或 hash 模式
  9. 可定制的滚动行为
  10. URL 的正确编码

安装

  1. npm i vue-router
  2. vue add router

使用vue add router 安装时全选yes（回车）就可以了，安装完成后会自动一个router文件和view文件

使用npm i vue-router安装时，所有的相关配置都要自己手动配置

使用

以npm i vue-router安装为例:

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  5. // 配置调试信息
  6. Vue.config.productionTip = false
  8. new Vue({
  9.   router,
  10.   render: h => h(App)
  11. }).$mount('#app')
  13. 需要在main.js中注册router组件

路由表：路由表放在router文件中

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. import HomeView from '../views/HomeView.vue'
  5. //通过vue.use的方式注册路由
  6. Vue.use(VueRouter)
  8. // 路由表，配置路由相关信息
  9. const routes = [
  10.   {
  11.     path: '/',
  12.     name: 'home',
  13.     // 这样的引用方式是静态引入
  14.     component: HomeView,
  15.     // 写数据，当前HomeView下可以拿到这些数据
  16.     // 在HomeView组件中，的mounted(){}生命周期中获取，也可以直接通过{{mustarche}}语法使用
  17.     // 通过this.$route获取(路由表中数据)数据
  18.     meta:{}
  19.   },
  20.   {
  21.     path: '/right',
  22.     name: 'content',
  23.     component: ()=> 
  24.     // 动态引入
  25.     // 这个注释是用来标注引入模块是什么名字
  26.     import(/* webpackChunkName: "content" */"../components/RightContent.vue")
  27.   },
  29.   {
  30.     path: '/right1',
  31.     // 重定项
  32.     redirect:"/right"
  33.   },
  35.   // 动态路由
  36.   {
  37.     //  /:id动态传值,这里有值了后,前面使用router-link跳转时要传值
  38.     // 例如:"/post/13",  这里的13就是动态数据
  39.     // 静态的内容不能变,动态的数据必须传
  40.     path:"/post/:id",
  41.     component: ()=> 
  42.     // 这个注释是用来标注引入模块是什么名字
  43.     import(/* webpackChunkName: "post" */"../views/post/post.vue")
  44.   },
  46.   // 嵌套路由,路由中套路由
  47.   {
  48.     path:"/post/:id",
  49.     component: ()=> 
  50.     import(/* webpackChunkName: "post" */"../views/post/post.vue"),
  51.     // 嵌套路由要在children中配置,
  52.     // 路径中有"/"会被当成根路径
  53.     // 
  54.     children:[
  55.       {
  56.         path:":id",
  57.         // 在post.vue中放一个router-view可以通过嵌套路由,将要嵌套的postDetail.vue映射过去
  58.         // component:import(/* webpackChunkName: "postDetail" */"../views/post/postDetail.vue"),
  59.     ]
  60.   }
  61. ]
  63. // 在这里实例化路由，并将路由表给实例化对象，
  64. // 还可以在这里配置相关的信息，
  65. const router = new VueRouter({
  66.   // mode不同的模式，会有不同的url形态
  67.   mode: 'history',
  68.   base: process.env.BASE_URL,
  69.   routes
  70. })
  72. export default router

通过router-link和router-view就可以展示页面了

  1. <!-- 跳转页面 -->
  2. // 和a标签很类似
  3. <router-link to="/right"></router-link>
  4. <!-- 映射路由 -->
  5. // <router-view>组件，用于映射跳转页面（相当于一个容器）
  6. 可以放在任何的地方
  7. <router-view>123</router-view>

过程

先配置路由（可以是静态路由，也可以是动态），实例化路由（router）并传入routes（路由表），mode（模式）等，然后导出router，在main.js中注册router。然后就可以使用router-view（类似slot）是一个容器，router-link用于跳转，类似a标签

查看路由信息

在一个组件内部调用router的api，通过this.$route查看有哪些api(这已经被挂载在vue原型上了)，对应当前组件的路由。
this.$router就是vue-router的一个实例（相当于new Vue，实例化后，也会生成一个全局的router），对应router的全局配置