【Vue Router】005-命名路由

╰半橙微兮° 2023-10-01 11:34 17阅读 0赞

## 1.5 命名路由 ##

### 1.5.1 概述 ###

有时候通过一个名字来标识路由会更方便，特别是在链接到路由，或者执行导航时。在创建 Router 实例的时候，在 routes 选项中为路由设置名称。

### 1.5.2 基本写法 ###

> 修改 index.js 文件

import {
         createRouter, createWebHashHistory } from 'vue-router'
    import Study from '../views/Study.vue'
    import Home from '../views/Home.vue'
    import News from '../views/News.vue'
    import Books from '../views/Books.vue'
    import Videos from '../views/Videos.vue'
    import Book from '../views/Book.vue'
    const routes = [
      {
        
        path: '/',
        component: Study,
        name: 'study',
        // 这里使用 name 指定重定向的目标
        redirect: {
        
          name: 'news'
        },
        children: [
          {
        
            path: '/home',
            name: 'home',
            component: Home
          }, {
        
            path: '/news',
            name: 'news',
            component: News
          }, {
        
            // 本来我们就使用嵌套路由了，咋这里我们再次向下嵌套
            path: '/books',
            name: 'books',
            component: Books,
            children: [
              {
         path: '/book/:id', name: 'book', component: Book }
            ]
          }, {
        
            path: '/videos',
            name: 'videos',
            component: Videos
          }
        ]
      }
    ]
    
    const router = createRouter({
        
      history: createWebHashHistory(),
      routes
    })
    
    export default router

### 1.5.3 另外两种重定向的方法 ###

> 方法一：指定目标路径

{
        
        path: '/'.
        // 指定目标路径
        redirect: '/news'
    }

> 方法二：使用函数动态重定向

{
        
        // /search/screens -> /search?q=screens
        path: '/search/:searchText',
        // 函数接收路由作为参数，动态返回重定向目标
        // 返回值可以是重定向的字符串路径或路径对象
        redirect: to => {
        
            return {
         path: '/search', query: {
         q: to.params.searchText } }
        }
    }

### 1.5.4 在设置导航链接时使用命名路由 ###

> 修改 Study.vue，注意 to 前面需要带 : ，:to

<template>
      <router-link to="/">主页</router-link>
      <router-link :to="{ name: 'news' }">新闻</router-link>
      <router-link :to="{ name: 'books' }">图书</router-link>
      <router-link :to="{ name: 'videos' }">视频</router-link>
      <div>=================</div>
      <router-view />
    </template>
    
    <script>
    export default {
      el: 'Study'
    }
    </script>
    
    <style>
    </style>

### 1.5.5 在设置导航链接时使用命名路由的传参数写法 ###

> 这里仅作写法展示，实际项目中需要修改路由配置 index.js 文件，使得能够接收参数即可，前面有案例

<router-link :to="{ name: 'news', params: {id: book.id} }">新闻</router-link>

### 1.5.6 在路由配置中给某个路径起个别名 ###

> 截取 index.js 中的片段进行演示

{
        
        path: '/news',
        name: 'news',
        component: News,
        alias: '/xinwen' // 给 news 起个别名 /xinwen
    }