Vue路由传值(笔记)

1. 声明式导航(跳转传值)

声明式导航传值需要依赖 Vue 中的 < router-link >标签

传:

<router-link to="/路径?参数名=参数值"> xxx </ router-link>

<!-- 例: -->
<!-- 跳转到 part 页面, 同时传递参数值为"小明"的 name 参数 -->
<router-link to="/part?name=小明"> 小明 </ router-link>

收:

<!-- query查询字符串的方式 -->
差值表达式: {{ $route.query.参数名 }}

<!-- 例: -->
<p>{{ $route.query.name }}的页面</p>

2. 声明式导航(动态路由)

在使用动态路由传值的时候, 同样依赖 Vue 中的 < router-link >标签, 但同时需要在 router 文件夹内定义路由规则的文件(一般是index.js)中定义好路由规则

传:

// 第一步需要在路由规则里定义好路由规则
{
    path: '/part/:参数名1/:参数名2 ...',  // 有冒号是一个明显的特征, 表示要传值
    component: Part
}

// 例: 
{
    path: '/part/:username',
    component: Part
}

<!-- 第二步在 to 属性里写入要传的具体的值 -->
<router-link to="/路径/参数值"> xxx </ router-link>

<!-- 例: -->
<router-link to="/part/小华"> 小华 </ router-link>

收:

{{ $route.parmas.参数名}}

<!-- 例: -->
<p>{{ $route.params.username }} 的主页</ p>

3. 编程式导航

在使用编程式导航跳转时, 可以使用 path属性 定位跳转页面, 也可以使用 name 属性定位跳转页面
path 路径跳转和 name 名字跳转用一个就好
用命名跳转的好处是在路径需要修改的时候只需要修改路由规则内的路径即可, 并且 name 属性在地址栏是不可见的, 属于无感知修改

// 路由规则
{
    path: '/part',
    name: 'part',
    component: Part
}

<!-- 页面跳转按钮 -->
<button @click="btnClick">点击去往小红的主页</ button>

// 给需要点击跳转的按钮绑定 click 事件 @click="btnClick"
btnClick(targetPath, targetName) {
    this.$router.push({
        path: targetPath
        name: targetName  // targetName 为组件名, 需要在路由规则里配置 name 属性
    }

// 例:
btnClick() {
    this.$router.push({
        path: '/part'
    })
}
// 或者
btnClick() {
    this.$router.push({
        name: 'part'
    })
}

传值:

在编程式导航传参中, 跳转方式可以使用 path 路径跳转或者 name 名字跳转两种方式
传值同样有两种方式: params 传值和 query 传值

this.$router.push({
    name: '组件名',
    params: {
        参数名: '参数值'
    }
})

this.$router.push({
    name: '组件名',
    query: {
        参数名: '参数值'
    }
})

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


// 例:
btnClick() {
    this.$router.push({
        name: 'part',
        query: {
            userName: '小红'
        }
    })
}

接收:

{{ $route.query.参数名 }}

<!-- 例: -->
<p>{{ $route.query.userName }} 的主页</ p>

注意:

• 当采用 path 跳转方式的时候, 会自动忽略 params 这一参数, 所以传参会接收不到,一般推荐 name 跳转方式, 配合 query 传参
• 在选择编程式导航传参时, 如果当前的 hash 值和 ?参数 与跳转的 hash 值和 ?参数 一致的情况下, 会爆出冗余导航的警告, 并且不会跳转路由
• 在路由嵌套中, 一级路由的路由规则中 path 需要写 ‘/xxx’, 而在子级路由的路由规则 path 内及不需要写 ‘/’, 直接 path: ‘xxx’
• 声明式导航中, 子级路由的跳转, < router-link >标签中的 to 属性, 需要从根路径开始写 to=‘/一级路径/二级路径’