Web前端开发之VUE15——Vue路由大全、编程式导航、导航守卫

原创已于 2022-04-21 19:02:02 修改 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #node.js

于 2022-04-21 19:01:39 首次发布

Web前端开发——Vue 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了如何通过锚链接Hash实现简单的前端路由，并深入探讨了vue-router的安装、配置和使用，包括路由重定向、高亮、嵌套、动态匹配、编程式导航和命名路由。同时，讲解了导航守卫的使用，特别是next函数的三种调用方式，以及如何结合token进行访问权限控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由：

通过锚链接Hash实现简易前端路由的方法：

路由：

通过锚链接Hash实现简易前端路由的方法：

示例代码：

<template>
  <div>
    <ul>
      <li><a href="#/home">Home</a></li>
      <li><a href="#/img">Img</a></li>
      <li><a href="#/about">About</a></li>
    </ul>
    <component :is="certainTab"></component>
  </div>
</template>

<script>
import Home from "./components/路由/利用components实现页面切换/Home.vue"
import Img from "./components/路由/利用components实现页面切换/Img.vue"
import About from "./components/路由/利用components实现页面切换/About.vue"

export default {
  components: {
    myHome: Home,
    myImg: Img,
    myAbout: About,
  },
  data(){
    return{
      certainTab:'myHome'
    }
  },
  created() {
    window.onhashchange=()=>{
      switch (location.hash){
        case '#/home':{
          this.certainTab='myHome'
          break
        }
        case '#/img':{
          this.certainTab='myImg'
          break
        }
        case '#/about':{
          this.certainTab='myAbout'
          break
        }
      }
    }
  }
}
</script>

vue-router:

vue-router的安装：

完成上面的步骤后会出现错误提示：

由于vue-router是一个外部组件包，所以需要在配置后才可以使用。

配置和使用vue路由：

示例代码：

//router.js
import {createRouter,createWebHashHistory} from 'vue-router'

import Home from './Home.vue'
import Img from './Img.vue'
import About from './About.vue'

const router= createRouter({
  history:createWebHashHistory(),
  routes:[
    {path:'/home',component:Home},
    {path:'/img',component:Img},
    {path:'/about',component:About},
  ]
})

export default router

//main.js
import router from './components/路由/vue-router的基础实现/router'

//挂载路由模块
app.use(router)

//app.vue
<template>
  <div>
    <ul>
      <li><router-link to="/home">Home</router-link></li>
      <li><router-link to="/img">Img</router-link></li>
      <li><router-link to="/about">About</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

vue-router高级用法：

路由重定向：

路由高亮：

示例代码：

.router-link-active{
  color: red;
  background-color: #cccccc;
}

自定义高亮class类名：

嵌套路由：

实现嵌套路由：

注意：子路由路径无需‘/’

嵌套路由的重定向：

原理与普通路由重定向一样。

示例代码：

//子路由的创建
    {
      path: '/about',
      component: About,
      redirect:'/about/Tab1',
      children: [
        {path: 'Tab1', component: Tab1},
      ]
    },

动态路由匹配：

获取动态路由参数值：

编程式导航：

命名路由：

示例代码：

<router-link :to="{name:'movie',params:{id:1}}">跳转到电影1</router-link>
  <router-link :to="{name:'movie',params:{id:2}}">跳转到电影2</router-link>
  <router-link :to="{name:'movie',params:{id:3}}">跳转到电影3</router-link>
  <router-view></router-view>

示例代码：

    jumpUrl(getMovieId){
      // this.$router.push(`/movie/${getMovieId}`)
      this.$router.push({name:'movie',params: {id:getMovieId}})
    }

同样也是传递一个对象。命名路由多用于路径繁琐、过长的情景下。

导航守卫：

示例代码：

//声明全局导航守卫
router.beforeEach(()=>{
  console.log('已启用导航守卫')
})

守卫方法的3个参数：

示例代码：

router.beforeEach(
    (to,
     from,
     next) => {
      console.log(`to:${to}`)
      console.log(`from:${from}`)
      console.log(`next:${next}`)
      console.log('已启用导航守卫')
    })