命名路由使用name
属性配置,
const router=new VueRouter({
routes:[
{
path:'/user/:userid',
name:'user',//设置name属性
component:User
}
]
})
那么路由设置好了,如何链接到路由呢?
命名路由和其他路由的不同之处就是链接到命名路由时不是使用to属性,而是使用v-bind:to,属性值不是路径字符串,而是一个对象。
<router-link :to="{ name:'user',params:{ userid:123 }}"
//等同于
router.push({ name:'user',params:{ userid:123}})
下面是一个具体的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
</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({
mode: 'history',
base:'__dirname',
routes: [
{ path: '/', name: 'home', component: Home },
{ path: '/foo', name: 'foo', component: Foo },
{ path: '/bar/:id', name: 'bar', component: Bar }
]
})
new Vue({
router,
template: `
<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>
`
}).$mount('#app')
</script>
</body>
</html>