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}
]
})

路由高亮

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

使用默认的高亮 class 类

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

自定义路由高亮的 class 类

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

嵌套路由

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

声明子路由链接和子路由占位符
在父路由规则中，通过 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>

通过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},
            ]
        }
    ]
})

动态路由

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

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

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

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

<template>
<h3>
    MyMovie组件 --- {{$route.params.id}}
    </h3>
</template>

使用 props 接收路由参数

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

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

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

<script>
  export default{
      //使用props接收路由规则中匹配到的参数
      props:['id']
  }
</script>

编程式导航

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

航。例如：

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

vue-router 中的编程式导航 API

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

this.$router.push(‘hash 地址’)
- 跳转到指定 Hash 地址，从而展示对应的组件
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>

调用 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>

命名路由

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

{
    path:'/movie:id',
    name:'mov',
    component:Movie,
    props:true,
}

注意：命名路由的 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>

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

调用 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>

导航守卫

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

Vue路由高级用法

vue-router的高级用法

悦读