Vue路由高级用法

vue-router的高级用法

路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。

通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向

const router = createRouter({
  history:createWebHashHistory(),
  routes:[
    {path:'/',redirect:'/home'}
    {path:'/home',component:MyHome},
    {path:'/movie',component:MyMovie},
    {path:"/about",component:MyAbout}
]
})
1
2
3
4
5
6
7
8
9

路由高亮

可以通过如下的两种方式，将激活的路由链接进行高亮显示：

1. 使用默认的高亮 class 类

   /*在index.css全局样式表中，重新router-link-active的样式*/
   <style>
   .router-link-active{
       background-color:red;
       color:white;
       font-weight:bold;
   }
   </style>
   1
   2
   3
   4
   5
   6
   7
   8

2. 自定义路由高亮的 class 类

   在创建路由的实例对象时，开发者可以基于 linkActiveClass 属性，自定义路由链接被激活时所应用的类名：

   linkActiveClass:'router-active'
   1

3. 嵌套路由

   通过路由实现组件的嵌套展示，叫做嵌套路由。

   1. 声明子路由链接和子路由占位符
   2. 在父路由规则中，通过 children 属性嵌套声明子路由规则

   声明子路由链接和子路由占位符

   在 About.vue 组件中，声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下：

   <template>
     <h3>
         MyAbout组件
       </h3>
   <!--在此页面中声明两个子路由链接-->
   <router-link to="/about/tab1">tab1</router-link>
   <router-link to="/about/tab2"></router-link>
   
   <!--在关于页面中，声明tab1和tab2的路由占位符-->
   <router-view></router-view>
   </template>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11

   通过children属性声明子路由规则

   在 router.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则。示例代码如下：

   import Tab1 from './components/tabs/MyTab1.vue'
   import Tab2 from './components/tabs/MyTab2.vue'
   
   const router = createRouter({
       routes:[
           {//about页面的路由规则
               path:'/about',
               component:About,
               children:[
                   {path:'tab1',component:Tab1},
   {path:'tab2',component:Tab2},
               ]
           }
       ]
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15

动态路由

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue-router 中

使用英文的冒号（:）来定义路由的参数项。示例代码如下：

{path:'/movie/:id',component:Movie}
1

通过动态路由匹配的方式渲染出来的组件中，可以使用 $route.params 对象访问到动态匹配的参数值。

<template>
<h3>
    MyMovie组件 --- {{$route.params.id}}
    </h3>
</template>
1
2
3
4
5

使用 props 接收路由参数

为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参。示例代码如下：

{path:'/movie/:id',component:Movie}

<template>
  <h3>
      MyMovie组件 ---{{id}}
    </h3>
</template>

<script>
  export default{
      //使用props接收路由规则中匹配到的参数
      props:['id']
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

编程式导航

通过调用 API 实现导航的方式，叫做编程式导航。与之对应的，通过点击链接实现导航的方式，叫做声明式导

航。例如：

• 普通网页中点击 <a> 链接、vue 项目中点击 <router-link> 都属于声明式导航
• 普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航

vue-router 中的编程式导航 API

vue-router 提供了许多编程式导航的 API，其中最常用的两个 API 分别是：

1. this.$router.push(‘hash 地址’)

   • 跳转到指定 Hash 地址，从而展示对应的组件

2. this.$router.go(数值 n)

   • 实现导航历史的前进、后退

调用 this.$router.push() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。示例代码如下：

<template>
  <h3>
      MyHome组件
    </h3>
  <button @click="gootoMovie(3)">
      go to Movie
    </button>
</template>

<script>
  export default{
      methods:{
          gotoMovie(id){
              this.$router.push('/movie/${id}')
          }
      },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

调用 this.$router.go() 方法，可以在浏览历史中进行前进和后退。示例代码如下:

<template>
  <h3>
      MyHome组件
    </h3>
  <button @click="goBack">
      后退
    </button>
</template>

<script>
  export default{
      props:['id'],
      methods:{
          goBack(id){
              this.$router.go(-1)//后退到之前的组件页面
          }
      },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

命名路由

通过 name 属性为路由规则定义名称的方式，叫做命名路由。示例代码如下：

{
    path:'/movie:id',
    name:'mov',
    component:Movie,
    props:true,
}
1
2
3
4
5
6

注意：命名路由的 name 值不能重复，必须保证唯一性

使用命名路由实现声明式导航

为 <router-link> 标签动态绑定 to 属性的值，并通过 name 属性指定要跳转到的路由规则。期间还可以用

params 属性指定跳转期间要携带的路由参数。示例代码 如下：

<template>
  <h3>
      MyHome组件
    </h3>
  <router-link :to="{name: 'mov',params:{id:3}}">go to Movie</router-link>
</template>

<script>
export default{
    name:'MyHome',
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

使用命名路由实现编程式导航

调用 push 函数期间指定一个配置对象，name 是要跳转到的路由规则、params 是携带的路由参数：

<template>
  <h3>
      MyHome组件
    </h3>
  <button @click="gootoMovie(3)">
      go to Movie
    </button>
</template>

<script>
  export default{
      methods:{
          gotoMovie(id){
              this.$router.push({name:'mov',params:{id:3}})
          }
      },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

导航守卫

导航守卫可以控制路由的访问权限。