vue-router

1.路由跳转

<router-link to="/home">静态路由跳转</router-link>

this.$router.push('/home')

this.$router.replace('/home')

2.动态路由传参

方法1.params

first.在router中的路由映射
{ path: '/login/:id/:name',name: 'Login',component: Login }
1.
<router-link :to="{name:'Login',params:{id:'110',name:'pourgay'}}">动态路由传参1</router-link>
2.
<Button type="primary" @click="changeRoute1(110，‘pourgay’)">动态路由传参2</Button>
changeRoute1(val) {this.$router.push({name: 'Login',params: {id: val}})}
3.
<Button type="primary" @click="changeRoute2(110，‘pourgay’)">动态路由传参3</Button> 
changeRoute2(val) { this.$router.push({ path: `/Login/${val}`}) }
then.接收参数
<p>{{ $route.params.id }}--{{ $route.params.name }}</p>

方法2.query

first.在router中正常配置
1.
<router-link :to="{path:/login',query:{id:'110',name:'pourgay'}}">动态路由传参1</router-link>
2.
<Button type="primary" @click="changeRoute1(110，‘pourgay’)">动态路由传参2</Button>
changeRoute1(val) {this.$router.push({name: 'Login',query: {id: val}})}
3.
<Button type="primary" @click="changeRoute2(110，‘pourgay’)">动态路由传参3</Button> 
changeRoute2(val) { this.$router.push({ path: `/Login/${val}`}) }
then.接收参数
<p>{{ $route.query.id }}--{{ $route.query.name }}</p>

3.路由懒加载

 {
    path: '/login/:name',
    name: 'Login',
    component: () => import('../views/Login.vue')
  }

4.路由嵌套

 {
    path: '/login/:name',
    name: 'Login',
    component: () => import('../views/Login.vue'),
    children: [
      {
        path: '/news',
        component: ()=> import('../views/News.vue')
      },
      {
        path: '/like',
        component: ()=> import('../views/Like.vue')
      }
    ]
  }

 5.路由守卫

在router中配置
{
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '主页'
    }
}
前置守卫
router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title
  next()
})
后置守卫
router.afterEach((to, from) => {
  // ...
})