vueRouter-命名路由-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

有时候通过一个名称来识别一个路由显得更方便，特别是在链接一个路由，或者是执行一些跳转的时候，
你可以在创建Router实例的时候，在routers配置中为某个路由设置名称

routes: [{
path: "/user/:userId",
name: "user",
component: User
}]
})
要链接到一个命名路由，可以给router-link的to属性传一个对象
<router-link :to="{name:'user',params:{userId:123}}">User</router-link>
这跟代码调用router.push()是一回事
router.push({name:'user',params:{userId:123}})
这两种方式都会把路由导航到/user/123路径

完整的一个例子：

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <h1>Named Routes</h1>
        <p>current route name:{{$route.name}}</p>
        <ul>
            <li>
                <router-link :to="{name:'home'}">home</router-link>
            </li>
            <li>
                <router-link :to="{name:'foo'}">foo</router-link>
            </li>
            <li>
                <router-link :to="{name:'bar',params:{id:123}}">bar</router-link>
            </li>
        </ul>
        <router-view class="view"></router-view>
    </div>
    <script>
    const Home = { template: `<div>this is Home</div>` }
    const Foo = { template: `<div>this is Foo</div>` }
    const Bar = { template: `<div>this is bar {{$route.params.id}}</div>` }
    const router = new VueRouter({

        routes: [
            { path: '/', name: 'home', component: Home },
            { path: '/foo', name: 'foo', component: Foo },
            { path: '/bar/:id', name: 'bar', component: Bar }
        ]
    })
    const app = new Vue({ router }).$mount("#app")
    </script>
</body>

转载于:https://my.oschina.net/u/2612473/blog/1535668