vue-router细节

一. vue-router的linkActiveClass作用

路由在匹配组件时，是模糊匹配，可以通过添加类名，

//路由js文件
const routes = [
    {
        path:"/xxx",
        component: A
    }
]
const router = new VueRouter({
    linkActiveClass:"active",//给路由动态添加激活类名
    routes
})

//模板template
<router-link exact :to="{path:'/xxx', query:{id:v.id}}" ></router-link>


//style
.avtive {
    background-color: "red"
}

二 .vue-router 几种动态路由传参接参

编程式导航 router.push

1. 命名路由传递参数

//router.js
const routes = [
    {
        path: "/news",
        name:"news",
        component: News
    }
    // {
    //     path: "/news/:userId",
    //     component: News
    // }
]

//需要params传递参数
this.$router.push({ name: 'news', params: { userId: 123 }})

//接受参数
this.$route.params.userId

2. 查询参数

//router.js
const routes = [
    {
        path: "/news",
        name:"news",
        component: News
    }
]

//需要params传递参数
this.$router.push({ path: '/news', query: { userId: 123 }})

//接受参数
this.$route.query.userId

声明式的导航

//1. 命名路由
<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>
<router-link :to="'/news/' + userId">click to news page</router-link>

//2. 查询参数
<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

注意：

1. 命名路由搭配params，刷新页面参数会丢失
2. 查询参数搭配query，刷新页面数据不会丢失
3. 接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值