vue之vue-router的使用

最新推荐文章于 2024-09-06 15:53:51 发布

xiao_lin_unit

最新推荐文章于 2024-09-06 15:53:51 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/weixin_43728193/article/details/121274935

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue Router的使用，包括创建和配置路由组件、使用router-link和router-view进行页面跳转和内容渲染、路径重定向、动态路由、路由懒加载、嵌套路由、参数传递等。此外，还探讨了导航守卫的概念，包括全局、路由独享和组件内的守卫，以及keep-alive的使用，以实现组件状态的缓存。

摘要由CSDN通过智能技术生成

一. `vue-router`的简单使用

1. 创建路由组件

如:创建一个简单的组件,定义为Home

<template>
  <div>
    <h2>Home</h2>
  </div>
</template>
<script>
  export default {
  	// 导出的组件名
    name: 'Home'
  }
</script>
<style scoped>
</style>

2. 配置路由映射

在router文件夹下的index文件中的routes中建立映射关系

// 导入组件
import Home from '../components/Home.vue'
const routes = [
// 配置路径和组件的映射关系
  {
    path: '/home',
    // 路由映射组件
    component: Home,
   }
]

3. 使用路由

在组件中使用和渲染组件
方法一:使用router-link组件实现

<template>
  <div>
    <router-link to="/home" tag="button" replace>Home</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
  	// 导出的组件名
    name: 'App'
  }
</script>
<style scoped>
</style>

router-link组件,路由链接点击组件

1.点击切换不同组件
2.to属性的值是路由映射中定义的path,如/home,/about,也可以是对象类型,如{path: '/home', query: {}};
3.tag属性表示标签渲染类型,默认是渲染<a>标签,如希望渲染button标签则改为button;
4.replace属性表示使用history.replaceState()而不是使用默认的history.pushState(),该属性不需要任何值
5.class属性,活跃的<router-link>的会添加一个router-link-active的class,表示当前活跃的组件
6.active-class属性,如果希望自定义活跃标签的class,可以使用此属性,修改活跃的class的名,如改为active,active-link等自定义的class;router中还有一个简便的统一写法,可以在router的index中创建VueRouter实例的时候,添加一个linkActiveClass属性,其值就是自定义的class名
6.可以同时存在多个,表示跳转到不同的组件

router-view组件,路由组件渲染组件

1.用于内容站位,作用是渲染目标组件内容
2.切换路由时,实际切换的是<router-view>挂载的组件,其他内容不会发生变化

方法二:使用js实现

<template>
  <div>
    <button @click="buttonClick">Home</button>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
  	// 导出的组件名
    name: 'App',
    methods: {
    	buttonClick() {
    		// this.$router获取的就是main.js中创建的路由实例
    		// history的pushState
    		this.$router.push('/home');
    		// history的replaceState
    		this.$router.replace('/home');
    	}
	}
  }
</script>
<style scoped>
</style>

关于组件中的$router和$route: 所有的组件都继承自Vue.prototype,所以,在router组件中将$router和$route放到Vue.prototype中,这样所有的组件就都可以获取到$router和$route.
同理,如果想将内容在所有组将中共享,可以通过此种方法实现: Vue.prototype.shareObj = { // ...}.当然此种方式不具有响应式

一. `vue-router`的其他用法

1. 路径重定向

在路由映射中配置路径重定向,如:

{
	path: '/',
	redirect: '/home'
}

上述路由就是将'/'重定向到了'/home'路径,类似于点击了'/home'的<router-link>标签

2. 动态路由

在路径映射中配置动态路由

{
	path: '/user/:userId',
	component: User
}

动态路由跳转

<router-link to="/user/1">用户</router-link>

取动态内容

// this.$route获取的是当前活跃的路由映射
// userId是路由映射中配置的动态路由中的":"之后名称
this.$route.params.userId

3. 路由懒加载

配置路径映射时使用路由懒加载方式,避免将所有业务逻辑写到一个js文件中

{
	path: '/home',
	component: () => import('../comonents/Home')
}

4. 嵌套路由

步骤一:创建子组件
步骤二:在路由映射中配置子路由

{
	path: '/home',
	component: () => import('../comonents/Home'),
	children: [
		{
			// 默认重定向
			path: '',
			redirect: '/news'
		}
		{
			// 注意不要加'/'
			path: 'news',
			conponent: () => import('../components/home/News')
		}
	]
}

步骤三:在组件内部使用<router-view>标签

<template>
  <div>
    <router-link to="/home/news">news</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
  	// 导出的组件名
    name: 'Home',
    methods: {
	}
  }
</script>
<style scoped>
</style>

5. 参数传递

params方式:动态路由
query方式:
路由映射配置

{
	path: '/profile',
	component: () => import('../components/Profile')
}

跳转映射

<router-link :to="{path: '/profile', query: {id: 1, name: 'user', age: 18}}">Profile</router-link>

点击跳转时的路径: xxx/profile?id=1&name=user&age=18

获取参数

this.$route.query.xxx

使用代码跳转

this.$router.push({
	path: '/profile',
	query: {id: 1, name: 'user', age: 18}
})

$\color{#00FF00}{日期：2021-11-12}$

三. 导航守卫

1. 全局导航守卫

在router的index文件中
前置守卫

router.beforeEach((to, from, next) => {
	// 从from跳转到to
	// 在路由映射中定义元数据
	// 父组件定义了元数据后matched中的所有组件中的元数据都会有该元数据的内容
	// 如果不使用matched[0]而直接使用meta,则子组件中找不到父组件中定义的元数据
	document.title = to.matched[0].meta.title
	// next函数必须调用,否则将无法跳转
	next()
})

后置守卫

// 没有next参数
router.afterEach((to, from) => {
	// 不用调用next
})

在配置路由映射时
定义元数据

{
	path: '/home',
	component: Home,
	meta: {
		title: '首页'
	}
}

2. 路由独享守卫

在配置路由映射时

{
	path: '/home',
	component: Home,
	beforeEnter: (to, from, next) =>{
		// ...
		next();
	}
}

3. 组件内守卫

在定义组件时
详情可见官网

{
	template: `...`,
	beforeRouteEnter(to, from, next) => {
		// ...
		next();
	},
	beforeRouteUpdate(to, from, next) => {
		// ...
		next();
	},
	beforeRouteLeave(to, from, next) => {
		// ...
		next();
	}
}

4. `keep-alive`

1. 介绍

keep-alive是vue的内置组件,可以使被包含的组件保留状态或避免频繁创建销毁和重新渲染

2. 原理

router-view也是一个组件,若果直接被包含在keep-alive中,所有路径匹配到的视图组件都会被缓存

3. 实现

<keep-alive>
	<router-view />
</keep-alive>

4. 配合`activated`和`beforeRouteLeave`缓存当前渲染的子组件

export default {
	name: 'Home',
	data() {
		return {
			path: '/home/news'
		}
	},
	// activated函数和deactivated函数只有在使用了keep-alive缓存了组件状态是才是有效的
	activated() {
		this.$router.push(this.path);
	},
	beforeRouteLeave(to, from, next) {
		this.path = this.$route.path;
		next();
	}
}