vue路由

时间:2022-11-14 08:53:38

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路由

概述

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
})

//引入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

3.注意点

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

4.路由的query参数

5.路由的params参数

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

的replace属性

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

性能参数测试:

## 编程式路由导航
// $router的两个API
this.$router.push({
        name: "路由命名",
        params: {
             参数1: xxx, 
             参数2: xxx 
            },
      });
this.$router.replace({
        name: "路由命名",
        params: {
             参数1: xxx, 
             参数2: xxx 
            },
      });

参考资料和推荐阅读

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

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