vue-router之to属性赋值

标签：完整   例子   传值   变量   参数   div   对象   北京   html   

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

vue-router之to属性赋值

标签：完整   例子   传值   变量   参数   div   对象   北京   html   

原文地址：https://www.cnblogs.com/ViavaCos/p/11730114.html