4. Vue 路由命名

Vue 路由命名

• 路由name属性对路由进行命名，实现路由跳转的反向解析

  <div id="app">
    <router-link to="/first">Go to First</router-link>
    <router-link :to="{name:'second'}">Go to Second</router-link>
    <router-view></router-view>
  </div> 
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  

  const First = { template: '<div>name: {{ $route.name }}</div>' } //调用路由name属性
  const Second = { template: '<div>name: {{ $route.name }}</div>' }
  routes = [
    { path:'/first', name:"first" ,component: First },  //设置路由name属性
    { path: '/second', name:"second", component: Second }
  ]
  router = new VueRouter({
    routes
  })
  const app = new Vue({
    router
  }).$mount('#app')