Vue-Router命名路由

文章来源：

http://www.hxstrive.com/article/598.htm

 

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

User组件：
<template>
    <div class="user">
        <h1>User Page</h1>
        <p>UserId = {{this.$route.userId}}</p>
    </div>
</template>
 
<script>
export default {
    name: 'User'
}
</script>
 
<style scoped></style>

路由配置：
import Vue from 'vue'
// 导入 vue-router
import VueRouter from 'vue-router'
 
// 导入自定义组件
import User from '@/components/User'
 
Vue.use(VueRouter);
 
// 配置路由
const router = new VueRouter({
  routes: [
        // 使用 name 属性将 /user/:userId 路由命名为 user
        { path: '/user/:userId', name: 'user', component: User }
    ]
})
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

1
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
这跟代码调用 router.push() 是一回事：

1
router.push({ name: 'user', params: { userId: 123 }})
这两种方式都会把路由导航到 /user/123 路径。