Vue复习（4）：Vue-路由相关（1）

愤怒的小火柴人

已于 2022-03-14 15:27:23 修改

阅读量669

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-03-13 20:47:04 首次发布

本文链接：https://blog.csdn.net/qq_45856669/article/details/123458810

版权

Vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章目录

一、下载安装
二、基本框架实现
三、router-link
四、路由的命名
五、参数的传递
六、导航守卫
七、嵌套路由
八、编程式导航
九、重定向
十、路由模式

一、下载安装

npm i vue-router@3.5.2 --save

这里注意，vue-router大概是过年的时候更新了，有些东西与之前版本不一样了，所以如果直接下载最新版本，在去实现本博客例子，会报下面的错误，所以本博文支持v@3.5.2版本的vue-router

在这里插入图片描述

二、基本框架实现

在src目录下创建我们的路由逻辑文件router.js文件，内部引入我们下载好的vue-router，使用Vue示例调用我们引入的vue-router，创建新的路由逻辑，内部定义一个home组件的路由逻辑，代码整体如下：

//vue 路由逻辑相关
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home'


Vue.use(VueRouter)

const router=new VueRouter({
    routes:[
      //路由相关逻辑
      {
          path:'/home',
          component:Home
      }
    ]
})
export default router

写完我们的路由逻辑后，将其引入到main.js文件中使用，添加到Vue实例中
main.js文件；

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Home.vue

<template>
    <div>Home</div>
</template>

注意！！App.vue里面视图部分要添加router-view
在这里插入图片描述
最后结果 home接口下实现了Home组件的渲染：

同样的方法，可以尝试添加一个person路由

三、router-link

基本使用方法：
App.vue下使用内部to属性进行路由的跳转
在这里插入图片描述
最后结果：

这里的link其实和React一样，都相当于一个a标签：

所以添加样式，达到独占一行效果：

<style>
   a{
     display: block;
   }
</style>

四、路由的命名

在路由逻辑下给我们定义的路由添加别名：
在这里插入图片描述
这样我们在调用时：

五、参数的传递

我们学习React的时候曾经定义过这种路由：

/page/1
/page/2

那么对于Vue中又该怎么写呢，在书写路由上也是传递一个:id
这时Person组件下的路由内容如下：
在这里插入图片描述
不难看出，这里面有一个params属性，该属性下含有一个id，即是我们设置的id，所以我们使用this.$route.params.id就能获取我们的id属性，即路由下的数字
Person.vue代码如下：

<template>
    <div>Person
        {{this.$route.params.id}}
    </div>

</template>

App.vue代码：

<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/person/1">Person1</router-link>
    <router-link :to="{path:"person",params:{id:2}}">Person2</router-link>
     <router-view></router-view>
  </div>
</template>

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

<style>
   a{
     display: block;
   }
</style>

router.js修改：
在这里插入图片描述

最后
在这里插入图片描述
App.vue也可以写成：

六、导航守卫

（粗略讲解，后面会细说）
beforeRouteUpdate即在我们要切换路由的时候我们就会触发这个导航守卫
（当路径发生变化，但是渲染的组件没有发生变化的时候触发）
在person中添加这个守卫：

<template>
    <div>Person
        {{$route.params.id}}
    </div>

</template>

<script>
export default {

   beforeRouteUpdate(to,from,next){
       console.log(to)//要去的路径
       console.log(from)//上一个路径
       console.log(next)
   }
}
</script>

此时，你点击person/1后再点击person/2，你会发现没有办法跳转到2里面，但是却可以跳转到home上，这便是next的作用，如果我们不执行这个next，我们无法跳转到渲染的组件相同但路径不同的页面上，所以导航守卫触发，无法跳转。但是如果执行了·next则不会有这种情况

七、嵌套路由

这里嵌套路由和我们react中的差不多，首先要在父路由下添加一个出行children，然后创建对应组件，将这个路由链接添加到视图（App.vue)上，然后就是最重要的一点，我们react上也有这一步，到目前为止，你点击子路由时，他只会渲染父路由的视图部分，这个问题很熟悉，那就是我们在父路由上没有添加子路由的位置，（这里回忆一波，react中我们使用的是Outlet）在Vue我们使用<router-view></router-view>
具体实现如下：
router.js修改部分：
在这里插入图片描述
Foo组件创建：

App.vue中路由链接的添加：

Home.vue: