官网介绍

Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。首先了解几个单词的意思就比较好理解了

route 单数,可以理解为单个路由或者某一个路由
routes 复数,可以理解为多个路由组成的集合一般都是数组类型
router 路由器,可理解一个容器,这个容器管理着所有的 route

安装

npm install vue-router

如下目录结构

│  App.vue
│  main.js
│
├─assets
│      vue.png
│
├─components
│      HelloWorld.vue
│
├─router
│      index.js
│
└─store
       index.js

// main.js
import Vue from 'vue'
import App from './App'
//引用router.js
import router from './router.js'
Vue.config.productionTip = false

new Vue({
  el: '#app',
//一定要注入到vue的实例对象上
  router,
  components: { App },
  template: '<App/>'
})

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)

// 引入组件页面
import Message  from './message.vue';
import News  from './news.vue';

// 定义routes路由的集合，数组类型
// 这里是 path 和 component 对应法则(个人理解)
const routes=[
    {path:'/message',component:Message},
    {path:"/news",component:News},
    // 嵌套路由
    {
    path:"/language",
    component:language,
    // 嵌套子路由放在 children 数组中 子路由 path 不用使用 / 前缀
    children:[
       {
            path: "Java",
            component: Java,
            // 可存放路由元消息
            meta: { requiresAuth: true }
        },
        {
            path: "JavaSctipt",
            component: JavaSctipt
        },
    ]
    },
]

const router=new VueRouter({
    routes
});

//抛出这个这个实例对象方便外部读取以及访问
export default router

路由导航的两种方式

声明式导航(也称标签式导航)

标签导航<router-link><router-link>是通过转义为<a></a>标签进行跳转，其中router-link标签中的to属性会被转义为a标签中的href属性；

// :to="{ name: '路由名称', [query:{}]}"
<router-link :to="{ name: 'routerName', query: { id: 2021-11-2 }}">Message</router-link>
// :to="{ name: '路由名称', [params:{}]}"
<router-link :to="{ name: 'routerName', params: { id: 2021-11-2 }}">Message</router-link>

编程式导航

我们可以通过this.$router.push()这个方法来实现编程式导航，当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转

// push 压栈方式 
router.push({ name: 'routerName', params: {}})
// 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步
router.go(n)
// router.replace({ name: 'routerName', params: { userId: 123 }})

路由组件传参

1. params 传参

动态路由路由匹配 language/Java/:id

const routes = [{path:"language/Java/:id",nama:"Java",component:"JavaComponent"}]

router.push() 方法的参数可以是一个字符串路径，或者一个描述地址的对象。

// 字符串路径
this.$router.push('/details/001')
// 带有路径的对象
this.$router.push({path: '/details/001'})
// 命名路由，路由配置时，需要 name 字段
this.$router.push({ name: 'details', params: { id: '001' } })
// 如果提供了`path`则会忽略`params`
this.$router.push({ path: '/details', params: { id: '002' } })
// 参数获取(可使用 watch 监视路由器的变化)
this.$route.params

2. query 传参

const routes = [{path:"language/Java",nama:"Java",component:"JavaComponent"}]

router.push() 方法的参数可以是一个字符串路径，或者一个描述地址的对象。

// 方式一
this.$router.push({path: '/details?id=001'})
// 方式二
this.$router.push({ name: 'details', query: { id: '001' } })
// query params 同时存在
this.$router.push({ name: 'details', query: { id: '001' },params: { id: '002' } })

3. hash 传参

通过此方式，url 路径中带有 hash 例如：/details/001#car,使用 hash 时，以下三种方式都是可行的（同 query）：

this.$router.push('/details/001#car')
this.$router.push({ path: '/details/001', hash: '#car'})
this.$router.push({ name: 'details', params: { id: '001' }, hash: 'car'})
// 接收
this.$route.hash.slice(1)

6. route配置props

在组件使用this.$route可以获取参数,但是与路由高度耦合，限制了组件的耦合性,它只能用来传递特点的 URL 我们还可以通过 props 来解决这种限制

当 props 设置为 true 时，route.params 将被设置为组件的 props。

// 对象
const routes = [{ path: '/news/:id', component: News, props: {name:'fsx'} }]
// 函数
const routes = [{ 
    path: '/news/:id', 
    component: News, 
    props: (route) => {
        // return 的值将被作为 props 的值
        retuen {}
        }
    }]

路由守卫

全局前置与后置守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
          // 组件内独享的守卫
          beforeEnter:(to,from,next)=>{}
          beforeRouteLeave:(to,from,next){}
        }
      ]
    }
  ]
})
// 全局前置守卫(个人理解:有Each表示每个路由都会触发这个方法)
router.beforeEach(to, from, next){
    // to 到那个路由
    // from 从哪里路由过来
    // next 调用才会进行跳转
}
// 全局后置守卫
router.afterEach((to, from) => {
  // ...
)

完整的路由

导航被触发
在失活的组件里调用 beforeRouteLeave 守卫
调用全局的 beforeEach 守卫
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter 。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

Vue路由（vue-router）查缺补漏