vue路由

Survive by day and develop by night.
talk for import biz , show your perfect code,full busy，skip hardness,make a better result,wait for change,challenge Survive.
happy for hardess to solve denpendies.

目录

概述

vue路由的是一个非常常见的需求。

需求：

设计思路

实现思路分析

1.路由

一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
前端路由：key是路径，value是组件。

2.使用

npm i vue-router。

在这里
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'   //步骤3里
 
//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
 
//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'
 
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})
 
//暴露router
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

3.注意点

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
每个组件都有自己的$route属性，里面存储着自己的路由信息。整个应用只有一个router，可以通过组件的$router属性获取到。

4.路由的query参数

5.路由的params参数

配置路由，声明接收params参数

的replace属性

控制路由跳转时浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push操作浏览器历史记录的模式

性能参数测试：

## 编程式路由导航

// $router的两个API
this.$router.push({
        name: "路由命名",
        params: {
             参数1: xxx, 
             参数2: xxx 
            },
      });
1
2
3
4
5
6
7
8

this.$router.replace({
        name: "路由命名",
        params: {
             参数1: xxx, 
             参数2: xxx 
            },
      });
1
2
3
4
5
6
7

参考资料和推荐阅读

[1]. https://blog.csdn.net/qq_42002794/article/details/121476068
[2]. http://www.ay1.cc/article/7446.html

欢迎阅读，各位老铁，如果对你有帮助，点个赞加个关注呗！~