Vue从入门到实战：命名路由

背景

有时通过一个名称来标识路由会更方便。

可以在创建Router实例的时候，在routes选项中为路由设置名称。

前置知识：Vue从入门到实战：感受前端路由、Vue从入门到实战：嵌套路由

实例

修改router目录下的index.js

路由router

router/index.js

添加根路径（/)的路由配置，并为其他路由取个名字。

import Vue from 'vue'
import VueRouter from 'vue-router'  // 导入vue-router
import News from '@/components/News'
import Books from '@/components/Books'
import Videos from '@/components/Videos'
import Book from '@/components/Book'

Vue.use(VueRouter)  //安装vue-router插件

// 将VueRouter实例作为模块的默认导出
const router = new VueRouter({

  routes: [
    {
      path: '/',
      redirect: {
        name: 'news'
      }
    },
		{
      path: '/news',
			name: 'news',
      component:News
    },
    
    {
      path: '/videos',
			name: 'videos',
      component:Videos
    },

    {
      path: '/books',
			name: 'books',
      component: Books,
			children:[
				{path: '/book/:id', name: 'book',component:Book}
			]
		},
		
		
  ]
})

export default router;

在根路径（/）的配置中，使用redirect参数将对该路径的访问重定向到命名的路由news上。

当访问http://localhost:8080 时，将直接跳转到News组件。

App.vue

修改App.vue，在设置导航链接时使用命名路由。

<template>
  <div id="app">
    <p>
    
      <router-link :to="{ name: 'news'}">新闻</router-link>
			<router-link :to="{ name: 'books'}">图书</router-link>
			<router-link :to="{ name: 'videos'}">视频</router-link>

    </p>
    <router-view></router-view>
    
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {
  }
}
</script>

注意，to属性的值现在也是表达式，因此需要使用v-bind指令。

Components

修改Books.vue 也使用命名路由

...
        <ul>
            <li v-for="book in books" :key="book.id">
                
                <router-link :to="{name: 'book', params: { id: book.id }}">{{book.title}}</router-link>
              

            </li>
        </ul>
...

接下来再次运行项目，测试效果和前面完全一样。

注：在路由配置中，还可以为某个路径取个别名

 
 routes:[
  { path:'/a',component:A,alias: '/b' }
]

当使用别名时，URL会保持为'/b'，但是后台路由匹配为'/a'

注意别名和重定向的区别。