vue-router命名路由

命名路由使用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>

猜你喜欢