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属性，值是一个对象，你要设置的参数放在对象里
如果需要这样传值，也需要在 你的路由表中定义好形参