kechenhh's blog
kechenhh
2021-08-02
目录

vue路由

# 1.搭建路由框架

安装(可通过脚手架安装)

npm install vue-router --save
1

创建 src/router/index.js (配置路由信息)

//配置路由相关的信息
//导入
import VueRouter from 'vue-router'
import Vue from 'vue'

//1.通过Vue.use(插件),安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes = [
	//在这里配置
]
const router = new VueRouter({
	//配置路由和组件之间的应用关系
	routes
})

//3.将router 对象传入到Vue实例
//导出
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在main.js中引入

import router from './router'//导入

new Vue({
  el: '#app',
	router, //挂载
	render:h =>h(App)
})
1
2
3
4
5
6
7

# 2.使用vue-router

创建Home组件和About组件

src/router/index.js中引入

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

const routers = [
    {
		path: '',
		// redirect重定向
		redirect:'/home'
	},
	{
		path:'/home',
		component:Home
	},
	{
		path:'/about',
		component:About
	},
]
const router = new VueRouter({
	//配置路由和组件之间的应用关系
	routes,
    //mode:'history'//改为history模式
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在App.vue中展示

<template>
  <div id="app">
		<!-- 用来切换 -->
		<router-link to="/home">首页</router-link>
		<router-link to="/about">关于</router-link>
		<!-- 用来占位，内容显示的位置 -->
		<router-view></router-view>
  </div>
</template>
1
2
3
4
5
6
7
8
9

# router-link补充

# 1.渲染成其他标签 tag

默认渲染成a标签

	<router-link to="/home" tag="button">首页</router-link>
	<router-link to="/about" tag="button">关于</router-link>
1
2

# 2.设置点击后不能返回 replace

<router-link to="/home" replace >首页</router-link>
<router-link to="/about" replace >关于</router-link>
1
2

# 3.修改按键激活状态的class

active-class="active" 将按键active状态下的class 设为“active”

<router-link to="/home" active-class="active" >首页</router-link>
<router-link to="/about" active-class="active" >关于</router-link>
1
2

在src/router/index.js中统一修改

const router = new VueRouter({
	//配置路由和组件之间的应用关系
	routes:routers,
	mode:'history',
	linkACtiveClass:'active'  //统一修改为active
})
1
2
3
4
5
6

# 通过代码跳转路由

<template> 
<div id="app">

		<button @click="homeClick">首页</button>
		<button @click="aboutCLick">关于</button>
		<!-- 用来占位，内容显示的位置 -->
		<router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
	methods:{
		homeClick(){
			//this.$router.push('home') //跳转代码 
            this.$router.replace('home') //设置不能返回
		},
		aboutCLick(){
			//this.$router.push('about')
            this.$router.replace('about')
		}
	}
}
</script>
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

# 动态路由

在 router/index.js中

const routers = [
	{
		path:'/user/:userId', //userId可以自己命名
		component:User
	}
]
1
2
3
4
5
6

在App.vue中

<template>
	<router-link :to="'/user/'+ userId">用户</router-link>
</template>

<script>
export default {
  name: 'App',
	data(){
		return{
			userId:'jack'
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 详情页获取路由信息

/components/User.vue中

<template>
	<div>
		<h2>用户界面</h2>
		<p>我是用户的相关信息</p>
		<h2>{{userId}}</h2>
	</div>
</template>

<script>
	export default{
		name:"User",
		computed:{
			userId(){
				return this.$route.params.userId
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# $router 和 $route

$router代表

在src/router/index.js中

const router = new VueRouter new的新对象 可以用来调用一些方法

$route代表

当前处于活跃的路由 的对象

# 路由的懒加载

懒加载：用到时再加载 （打包时，js分包）

src/router/index.js中

//配置路由相关的信息
//导入
import VueRouter from 'vue-router'
import Vue from 'vue'

const Home = () => import('../components/Home')   //懒加载
const About = () => import('../components/About')
const User = () => import('../components/User')


//1.通过Vue.use(插件),安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routers = [
	{
		path: '/',
		// redirect重定向
		redirect:'/home'
	},
	{
		path:'/home',
		component:Home
	},
	{
		path:'/about',
		component:About
	},
	{
		path:'/user/:userId',
		component:User
	}
]
const router = new VueRouter({
	//配置路由和组件之间的应用关系
	routes:routers,
	mode:'history'
})

//3.将router 对象传入到Vue实例
//导出
export default router
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 路由的嵌套使用

src/router/index.js中

const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')


const routers = [
	{
		path:'/home',
		component:Home,
		children:[
			{
				path:'/',
				redirect:'news'
			},
			{
				path:'news',
				component:HomeNews
			},
			{
				path:'message',
				component:HomeMessage
			},
		]
	}

]
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

Home.vue中

<template>
	<div>
		<h2>这是首页</h2>
		<p>这是首页的内容。。。</p>	
		<router-link to="/home/news">新闻</router-link>
		<router-link to="/home/message">消息</router-link>
		<router-view></router-view>
	</div>
</template>
1
2
3
4
5
6
7
8
9

# 使用query进行参数传递

App.vue中

<router-link :to="{path:'/profile',query:{name:'why',age:18,height:1.8}}">档案</router-link>
1

Profile.vue中

<template>
	<div>
		<h2>我是Profile组件</h2>
		<h2>{{$route.query.name}}</h2>
		<h2>{{$route.query.age}}</h2>
		<h2>{{$route.query.height}}</h2>
	</div>
</template>
1
2
3
4
5
6
7
8

使用方法进行跳转

<script>
export default {
  name: 'App',	
	methods:{
		profileClick(){
			this.$router.push({
				path:'/profile',
				query:{
						name:'kobe',
						age:19,
						height:1.87
				}
			})
		}
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 全局导航守卫

实现title的切换

在/src/router/index.js中

const routers = [
	{
		path:'/home',
		component:Home,
		meta:{
			title:'首页'  //添加meta元数据（描述数据的数据）
		}
	},
	{
		path:'/about',
		component:About,
		meta:{
			title:'关于'
		}
	},

]

//前置守卫(guard) 跳转前执行
router.beforeEach((to,from,next)=>{
	//从from跳转到to
	document.title = to.matched[0].meta.title
	// console.log(to)
	// console.log('+++++')
	next()
})

//后置钩子(hook)	跳转后执行
router.afterEach((to,from) =>{
	// console.log('-----')
})
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
29
30
31
32
33

# keep-alive

需求：保持Home离开前的路径

App.vue中

		<keep-alive>
			<router-view/>
		</keep-alive>
1
2
3

在Home.vue中

<template>
	<div>
		<h2>这是首页</h2>
		<p>这是首页的内容。。。</p>
		
		
		<router-link to="/home/news">新闻</router-link>
		<router-link to="/home/message">消息</router-link>
		
		<router-view></router-view>

			
	</div>
</template>

<script>
	export default{
		name:"Home",
		data(){
			return{
				message:'你好',
				path:'/home/news'
			}
		},
		created() {
			console.log('home created') //创建时
		},
		destroyed() {
			console.log('home destroyed')	//销毁时
		},
		activated() {
			console.log('activated')	//处于活跃时
			this.$router.push(this.path).catch(err => {err})
		},
		deactivated(){
			console.log('deactivated')  //脱离活跃时
		},
		beforeRouteLeave(to,from,next) {
			// console.log(this.$route.path)
			this.path = this.$route.path //离开路由之前执行
			next()
		}
	}
</script>
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

activated()和deactivated() 这两个函数，只有该组件被保持了状态 使用了keep-alive时，才是有效的。

# keep-alive属性

include -字符串或正则表达，只有匹配的组件会被缓存 exclude -字符串或正则表达式，任何匹配的组件都不会被缓存

<!-- exclude排除 填入组件的name-->
<keep-alive exclude="Profile,About"> 
    <router-view/>
</keep-alive>
1
2
3
4

# Vue-router 报NavigationDuplicated的解决方案

方法1：

在/router/indx.js中

import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
1
2
3
4
5
6
7

方法2：

为每个router.push增加回调函数

router.push('/location').catch(err => {err})
1

方法3：

固定vue-router版本到3.0.7以下

去GitHub编辑 (opens new window)
上次更新: 2021/08/02, 13:47:59
Vuex学习
vue的插槽

← vue的插槽→

最近更新
01
sql语句基础
10-21
02
express基础
10-21
03
转换文件
08-27
更多文章>
Theme by Vdoing | Copyright © 2021-2023 kechenhh | MIT License
×