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属性,值是一个对象,你要设置的参数放在对象里
? 如果需要这样传值,也需要在 你的路由表中定义好形参
相关推荐
前端小白 2020-07-19
85423468 2020-07-19
bowean 2020-07-05
82344699 2020-07-05
85423468 2020-06-26
ggkuroky 2020-06-17
89711338 2020-06-14
80437700 2020-06-02
85394591 2020-05-31
80437700 2020-05-15
85394591 2020-05-15
80324291 2020-05-11
80437700 2020-05-11
85394591 2020-05-10
85423468 2020-05-05
87133050 2020-04-30
85497718 2020-04-29