一、下载安装
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:
最终结果:
八、 编程式导航
到目前位置,我们都在使用link这个组件形式的跳转,所谓编程式导航就是使用我们js函数的形式进行跳转。
this.$route:相当于我们html里的div、p标签
this.$router:相当于我们的html标签,是我们的根路由。
我们打印一下router如下,发现其中有很多函数,下面一一讲解这些函数:
1.push
在当前路径的后面添加路由
2.go
当前路径下为0,之前的路径逐次-1,
例如:/page/home/hello
现在hello为0-----》 home为-1----》page为-2
那么this.$router.go(-1),就会来到/page/home
3.back
相当于你浏览器的回退按钮
4.forward
相当于你浏览器的前进按钮
5.replace
替换
例:当前你访问过的页面:[’/’,’/home’,’/hello’]
使用this.$router.replace(’/1231’)
则变成了:[’/’,’/home’,’/1231’]
九、重定向
当你像点击某一个链接时,它自动重定向给你展示了另一个网页。
在routes.js中添加路由:当你想访问’/123’时,就会重定向到’/home’
{
path:'/123',
redirect:'/home'
}
十、路由模式
Vue默认的路由模式就是hash,所以前面带一个’#‘,而react默认的路由模式是history,所以前面不带’#‘
这个模式添加在router的mode里。