关于vue-router的简单使用-CSDN博客

本文链接：https://blog.csdn.net/m0_73598778/article/details/141172579

一、理解

vue的一个插件库，专门用来实现SPA应用

二、对SPA应用的理解

1.单页Web应用

2.整个应用只有一个完整的页面

3.点击页面中的导航链接不会刷新页面

4.数据需要通过ajax请求获取

三、什么是路由？

1、一个路由就是一组映射关系

2、key为路径，value可能是function或component

四、路由分类

1.后端路由：

（1）理解：value是function，用于处理客户端提交的请求

（2）工作过程:服务器接收一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

2.前端路由

（1）理解：value是component，用于页面的内容展示

（2）工作过程:当浏览器的路径改变时，对应的组件就显示

五、vuex的安装和使用

一、路由的简单使用

vue2推荐安装vuex3及以下版本

npm install vue-router@3

npm install vuex --save

main.js引入

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from "./router/index.js"
Vue.use(VueRouter)


Vue.config.productionTip = false
//入口文件
new Vue({
  render: h => h(App),
  router:router,
}).$mount('#app')

src中添加目录router并创建js文件

import VueRouter from 'vue-router'
import About from '../components/About'
import Home from '../components/Home'

export default new VueRouter({
	routes:[
		{
			path:'/about',  //引入的组件目录的命名
			component:About  //引入的组件名
		},
		{
			path:'/home',
			component:Home
		}
	]
})

component中添加About组件和Home组件

<template>
	<div id="app">
		<h1>About</h1>
	</div>
</template>

<script>
	export default {
		name: 'About',
		data() {
			return {

			}
		},
		methods: {
			name() {

			}
		},

	}
</script>

<style>

</style>

<template>
	<div id="app">
		<h1>Home</h1>
	</div>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
			
			}
		},
	methods: {
		name() {
			
		}
	},
	}
</script>

<style scoped>

</style>

使用

<template>
	<div id="app">
		<router-link to="/about">ABOUT</router-link> //跳转路由组件，点击后根据点击的目录控制下方引入组件
		<router-link to="/home">HOME</router-link>
		<hr />
		<router-view></router-view> //引入组件，以及展示位置
	</div>
</template>

<script>
	export default {
		name: 'App',
		data() {
			return {
			
			}
		},
		components: {

		},
		mounted() {
			
		},
		methods: {
			
		}

	}
	//汇总所有组件
</script>

<style>
	#app {
	
	}
</style>

点击路由后，下方组件进行展示和切换，由于不想加箭头，看上方网站查看是否有跳转

几个注意

1.路由组件通常存放在pages文件夹，一般组件放在componwnt中

2.通过切换消失的组件默认销毁，需要时在去挂载

3.每个组件都有一个$router属性，里面存储着自己的路由信息

4.整个应用只有一个router，可以通过$router属性获取到

2、多级路由的使用

router目录下的js文件

//用于创建整个应用的路由
import VueRouter from 'vue-router'
import About from '../pages/About'
import Home from '../pages/Home'
import Mgn from '../pages/Mgn'
import Take from '../pages/Take'

export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About,
		},
		{
			path:'/home',
			component:Home,
			children:[{  //使用children实现下级路由跳转
					path:'Mgn',
					component:Mgn,
			},
			{
					path:'Take',
					component:Take,
			}]
		}
	]
})

使用

Home文件

<template>
	<div id="app">
		<h1>Home</h1>
		<router-link to="/home/Mgn">gan</router-link>
	<hr />
		<router-link  to="/home/Take">cscc</router-link>
		<hr />
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
			
			}
		},
	methods: {
		name() {
			
		}
	},
	}
</script>

<style scoped>

</style>

展示

3、路由数据的传递方法

<router-link to="/home/Take/deli?id=001&name=老板dd">cscc</router-link>

单个数据传递：to='路由目录？传递参数名='数据'

<router-link :to="{
			path:'/home/Take/deli',
			query:{
				id:'001',
				name:'老板dd'
			}
		}">cscc</router-link>

对象数据传递

如何接收参数：this$.route.query.传递参数名

命名路由跳转name

export default new VueRouter({
	routes:[
		{
			name:'主页',
			path:'/about',
			component:About,
		},
		{ name:'信息1',
			path:'/home',
			component:Home,
			children:[{
				 name:'信息分类',
					path:'Mgn',
					component:Mgn,
			},
			{      name:'信息',
					path:'Take',
					component:Take,
					children:[{
						name:'xiangqi',
						path:'deli',
						component:deli,
					}]
			}]
		}
	]
})

	<router-link :to="{name:'xiangqi'}">cscc</router-link>

路由的params参数

export default new VueRouter({
	routes:[
		{
			name:'主页',
			path:'/about',
			component:About,
		},
		{ name:'信息1',
			path:'/home',
			component:Home,
			children:[{
				 name:'信息分类',
					path:'Mgn',
					component:Mgn,
			},
			{      name:'信息',
					path:'Take',
					component:Take,
					children:[{
						name:'xiangqi',
						path:'deli/:id/:name',
						component:deli,
					}]
			}]
		}
	]
})

使用

	<router-link :to="{
		name:'xiangqi',
			params:{
				id:'001',
				name:'老板dddd'
			}
		}">cscc</router-link>
或者

	<router-link :to="to="/home/Take/deli/001/板dd">cscc</router-link>

如何接收参数：this$.route.params.传递参数名

关于router-link标签的replace属性

1.用于控制路由跳转时操作浏览器历史模式

2.浏览器的历史记录有两种写入方式:分别为push 和 replace , push 是追加历史记录, replace 是替换当前记录,replace替换当前记录。

3. 如何开启 replace 模式：<router-link replace>News</router-link>

4、不使用router-link 方法跳转

fs() {
				// this.$router.push({  //push方法
				// 	name:'xiangqi',
				// 	query:{
				// 		id:'001',
				// 		name:'老板dddd'
				// 	}
				// })
				this.$router.replace({ //replace方法
					name: 'xiangqi',
					query: {
						id: '001',
						name: '老板dddd'
					}
				})
			}   //.forward 前进  back 后退 go(数字) 前也可后也可

五、缓存路由组件

作用：让不展示的路由保持挂载，不被销毁

		<keep-alive include="Take">
				<router-view></router-view>
		</keep-alive>

六、两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态

1：activated路由组件被激活时触发

2.deactivated路由组件失活时触发

七、全局路由守卫

beforeEach全局前置路由守卫---每次初始化的时候被调用，每次路由切换之前
beforeEach全局后置守卫每次初始化的时候被调用，每次路由切换之后

router.beforeEach((to,form,next)=>{
	console.log(to,form,next)
})
router.afterEach((to,form)=>{
	console.log(to,form)
})

beforeEnter：独享路由守卫是某一个独自使用一个前置路由守卫

{
					name: '信息',
					path: 'Take',
					component: Take,
					children: [{
						name: 'xiangqi',
						path: 'deli/:id/:name',
						component: deli,
						props: true
					}],
					beforeEnter((to, form, next) => {
						console.log(to, form, next)
					})
				}

八、组件路由守卫

beforRouteEnter(to, from, next){
			next()
		},
		beforRouteLeave(to, from, next){
				next()
		},