20VueRouter
# VueRouter
Vue Router 是
Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。
# 安装和使用
npm i vue-router -S
1
# 创建路由文件
//router/index.js
import Vue from "vue"
import VueRouter from "vue-router"
import home from "@/views/home/home"
Vue.use(VueRouter)
export default new VueRouter({
routes:[{
path:"/home",
component:home
}]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 在main.js引入
//main.js
import Vue from 'vue'
import App from './App.vue'
import store from "@/Store/index.js"
import router from "@/router/index.js"
Vue.config.productionTip = false
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 路由视图
//App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 渲染的路由组件
//views/home/home.vue
<template>
<div>home页面</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 别名和重定向
别名可以让一个页面同时有两个名字。
重定向是打开a页面，跳到b页面去。
export default new VueRouter({
mode: 'history',
routes:[{
path:"/",
alias:"/home",
component:home
},{
path:"/list",
redirect:"xxx",
component:list
}]
})
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 路由跳转
//router-link标签只能跳到路由里面有记载的页面
<router-link to="/list">跳到列表页</router-link>
//如果要跳到项目外的页面，使用a标签
<a href="<http://www.baidu.com>"></a>
1
2
3
4
5
2
3
4
5
# 路由对象
console.log(this.$router)//整个路由对象所有的信息（所有的路由）
console.log(this.$route)//当前路由的信息（只能获取当前路由）
1
2
3
2
3
# 路由方法
this.$router.push()//跳到某个页面
this.$router.foworad()
this.$router.back()
this.$router.go(1)
this.$router.go(-1)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 编程式导航
//根router-link一样的效果
this.$router.push("/list")
//根a标签一样的效果
location.href = "<http://www.baidu.com>"
1
2
3
4
5
2
3
4
5
# 路由传参
<router-link :to="{path:'/list',query:{id:1}}">跳到列表页</router-link>
this.$router.push({path:'/list',query:{id:1}})
1
2
3
2
3
接收参数
console.log(this.$route.query.id)
1
# 路由传参解耦
//router/index.js
export default new VueRouter({
mode: 'history',
routes:[{
path:"/",
alias:"/home",
component:home
},{
path:"/list",
component:list,
props:(route)=>{
return {
id:route.query.id
}
}
}]
})
//list.vue
export default {
props:{
id:String
},
created(){
// console.log(this.$route.query.id)
console.log(this.id)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 命名路由
使用name进行跳转页面
<router-link :to="{name:'list',params:{id:1}}">跳到列表页</router-link>
{
path:"/list",
name:"list",
component:list,
}
1
2
3
4
5
6
7
2
3
4
5
6
7
命名路由跳转页面的时候会有一个问题，刷新页面后数据会消失。
//解决方法是在path的后面加上:数据
{
path:"/list/:id",
name:"list",
component:list,
}
1
2
3
4
5
6
2
3
4
5
6
params路由解耦
{
path:"/list/:id",
name:"list",
component:list,
props:(route)=>{
return {
id:route.params.id
}
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 嵌套路由
在页面里面再添加多一个页面，相当于画中画的效果
export default new VueRouter({
mode: 'history',
routes:[{
path:"/",
alias:"/home",
component:home,
children:[{
path:"/home/a",
alias:"/home",
component:acom
},{
path:"/home/b",
component:bcom
}]
}]
})
// home页面
<router-view></router-view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 路由拦截(路由守卫)
一般用于做登录拦截。
全局前置守卫 beforeEach 所有的页面进入页面之前进行拦截
全局解析守卫 beforeResolve 所有的页面的异步路由加载完毕后拦截
全局后置钩子 afterEach 所有的页面进入页面后进行拦截
路由独享的守卫 beforeEnter 单独拦截某一个路由页面
组件内的守卫 在组件页面内进行拦截
beforeRouteEnter 进入当前组件进行拦截（无法直接获取this实例，需要在回调函数里面获取）
beforeRouteUpdate 更新当前路由进行拦截
beforeRouteLeave 离开当前路由进行拦截
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 路由懒加载
没有路由懒加载的页面，上线之后进入页面会加载所有的页面，会导致用户体验比较差。正确的做法是用户打开一个页面就加载一个页面。
const router = new VueRouter({
mode: 'history',
routes:[{
path:"/",
alias:"/home",
component:()=>import("@/views/home/home")
},{
path:"/list",
component:()=>import("@/views/list/list")
}]
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
编辑 (opens new window)
上次更新: 2023/08/06, 00:38:41