vue-router之to属性赋值

to属性赋值

<!-- html -->

<div id="app">
<router-link to="/bj/朝阳区">北京</router-link>
<!-- 常规 -->
<router-link to="/sh">上海-常规</router-link>
<!-- 变量 -->
<router-link :to="path">上海-变量</router-link>
<!-- 对象path -->
<router-link :to="{path:'/sh'}">上海-对象path</router-link>
<!-- 对象name -->
<router-link :to="{name:'b'}">上海-对象name</router-link>
<!-- 对象name传值 -->
<router-link :to="{name:'a', params:{placename:'丰台区'}}">北京-对象name传值</router-link>

<router-view></router-view>
</div>

<!-- js -->

<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
var router = new VueRouter({
routes: [
{
// 定义当前路由表中的name，可以不写
name: 'a',
// 设置参数(形参)
path: '/bj/:placename',
component: {
// 通过$route.params.参数名来获取参数
template: `
<div>北京市{{$route.params.placename}}</div>
`
}

},
{
name: 'b',
path: '/sh',
component: {
template: `
<div>上海</div>
`
}

}
]
})

var vm = new Vue({
el: '#app',
data: {
path: '/sh',
},
methods: {},
router
});
</script>

​ 1.常规跳转: 直接在to属性后面填写路由地址即可

<router-link to="/sh">上海-常规</router-link>

​ 2.变量：需要使用v-bind指令使to属性后方地址称为变量而非字符串（需提前在路由表设置参数）

<router-link :to="path">上海-变量</router-link>

​ 3.带参数的跳转：直接在to属性后方手动拼接字符串即可

<router-link to="/bj/朝阳区">北京</router-link>

​ 4.根据对象path跳转，依旧需要使用v-bind指令，并给to属性传递一个对象，对象内部是键值对，键为path

<router-link :to="{path:'/sh'}">上海-对象path</router-link>

​ 5.根据对象name跳转：依旧需要使用v-bind指令，还是to属性传递一个对象，但键名为路由表中设置好的name属性

<router-link :to="{name:'b'}">上海-对象name</router-link>

​ 6.对象name传值：传递name属性同事，为params传递一个数据（也需提前在路由表设置参数）

<router-link :to="{name:'a', params:{placename:'丰台区'}}">北京-对象name传值</router-link>

​ 注意:
​ 如果提供了 path，params 会被忽略，上述例子中的name并不属于这种情况
​ 你可以提供路由的 name 并手写完整的参数params：
​ 在导航中直接给router-link设置params属性，值是一个对象，你要设置的参数放在对象里
​ 如果需要这样传值，也需要在 你的路由表中定义好形参