Vue-Router进阶相关，声明式导航，路由基本配置，编程式导航

1.声明式导航

导航高亮

在鼠标点导航时，会自动为导航所在标签添加两个类

<router-link to='/Like'></router-link>

分别为router-link-exact-active和router-link-active

router-link-exact-active 精确匹配  只有to='/Like'生效（用得少）

router-link-active 模糊匹配 to='/Like'  to='/Like/me'  to='/Like/user'  to='/Like/love'  都生效（用的多）

自定义高亮类名

一定有小伙伴觉得这类名也太长了，那我们可以在创建路由实例时自定义高亮类名

const router = new VueRouter({
routes: [...],
linkActiveClass: "类名1",
linkExactActiveClass: "类名2"
})

声明式导航传参

① 语法格式

<router-link to='/Like?参数名=值'></router-link>

②接收传递的值

$route.query.参数名

动态路由传参

动态路由传参需要配置路由实例

① 配置动态路由

const router = new VueRouter({
routes: [
...,
{
path: '/search/:id',
component: Search
}
]
})

② 配置导航链接 l to="/path/参数值"

<router-link to='/Like?参数名=值'></router-link>

③ 对应页面组件接收传递过来的值 l $route.params.参数名

$route.params.参数名

2.路由基本配置

①redirect路由重定向

②component目标组件

③children子路由

④path:"*"任意路由

⑤mode路由模式，默认hash,常用history

const router = new VueRouter({
  routes: [
    {
      path: "/",
      redirect: "/Home",  //路由重定向
    },
    {
      path: "/Home",
      component: Layout,  
      redirect: "/Like",
      //配置子路由
      children: [           
        { path: "/Like", component: Like },
        { path: "/User", component: User },
        { path: "/Collect", component: Collect },
        { path: "/Article", component: Article },
      ],
    },
     //任意路由，须写在最后，当前面的不匹配就命中最后这个
    { path: "*", component: NotFound },

  ],
mode:'history'//路由模式
});

3.编程式导航

用js代码来进行跳转

基本跳转

①path路由路径跳转

this.$router.push('路由路径')
this.$router.push({
path: '路由路径'
})

②name命名路由跳转

this.$router.push({
name: '路由名'
})

name命名路由跳转需要在路由实例中设置路由名

{ name: '路由名', path: '/Like',component:LikeLove}

路由传参

path路径跳转

①查询参数传参

this.$router.push('/路径？参数名1=参数值1&参数名2=参数值2')
this.$router.push({
path: '路由路径',
query:{
参数名1:参数值1,
参数名2:参数值2
}
})

②动态路由传参

this.$router.push('/路径/参数值')
this.$router.push({
path: '/路径/参数值'
}

name命名路由传参

①查询参数传参

this.$router.push({
name: '路由名字',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})

②动态路由传参

this.$router.push({
name: '路由名字',
params: {
参数名: '参数值',
}
})