vue-router路由笔记

嗷嗷待哺的簸箕板

已于 2022-02-06 16:08:49 修改

阅读量420

点赞数

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

于 2022-02-03 17:06:38 首次发布

本文链接：https://blog.csdn.net/weixin_45754293/article/details/122777050

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

路由

路由

认识路由

网络工程里面的术语
就是通过互联的网络把信息从原地址传输到目的地址的活动
路由器
- 路由器提供了两只机制：路由和转送
  - 路由是决定数据包从来源到目的地址的路径
  - 转送将输入端的数据转移到合适的输出端
- 路由表
  - 路由表本质上就是一个映射表，决定了数据包的指向

前端渲染和后端渲染

后端渲染

jsp/php

前端渲染

ajax

url的Hash与HTML5的history

location.href
history.pushstate({},’’,‘me’):入栈，加入网页地址
history.back():退回
history.replaceState({},’’,‘地址’):替换
history.go
- history.go(-1)==history.back() 数字代表弹出页面数量
- 可以参考小程序或者微信小程序的navigate.back()
history.forward()
- 向前一步
配置路由两种方式：hash或者history
不同配置方式，结果也不一样,默认配置是Hash，会有#，默认Pushstate方法，可以点击返回，用replace则是不可以点击返回，replaceState

vue-router基本使用

各个框架都有自己的路由,

安装
- npm install vue-router --save
导入，因为他是个插件，可以通过Vue.use()安装路由功能,可以在src文件夹下创建router文件夹，然后写Js文件管理路由
- 导入路由对象，并且调用Vue.use(VUeRouter)
- 创建路由实例，并且传入路由映射配置
- 在vue实例中挂载创建的路由实例,可以修改mode:history|abstract|hash,默认Hash，地址栏会带有#
- 由于脚手架中有安装ESLint，写的话，可以关闭，在package.json的ESLint的rules加入：no-mixed-spaces-and-tabs：0
使用vue-router步骤
- 创建路由组件
- 配置路由映射，组件和路径映射关系
- 使用路由，通过和
  - router-link链接
  - router-view占位
  - redirect:’/home’重定向，如果Path不写，默认重定向
  - 对比，router-link组件避免了不必要的重渲染,它只更新变化的部分从而减少DOM性能消耗。
  - 一种用router-link跳转
  - 一种代码跳转，this.$router.replace|push(’/about’)
路由中有三个基本的概念 route, routes, router & $router & $route
- 1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容，这是一条route, about按钮 => about 内容，这是另一条路由。
- 2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
- 3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
- 4，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.
- $router
  - router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样
- $route
  - route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。。
动态路由
- 含义
- 用法一不绑定，在注册路由加上:data 如 Path: ‘path:’/user/:userid’’,然后在app.vue中 to="/user/admin"
- 用法二绑定，用户绑定 userid在data里定义即可，如果数据未找到，那就是undefinded
- 懒加载，用到时再加载
vue-router打包
路由懒加载
- 在routes里，components:()=>import(’…/xxxx.vue’) 或者先定义好 const Home=()=>import(’…/components/home.vue’)
- AMD & CMD & 箭头函数 & import & require
- 此时在dist里打包文件会多出几个，只有用到的时候，才会加载，一个懒加载对应一个js文件

vue-router嵌套路由

一个路径映射一个组件，访问这两个路径也会分别渲染两个组件，如在home页面中，我们希望通过/home/news和/home/message访问一些内容
步骤
- 创建对应的子组件，并且在路由映射中配置对应的子路由,使用children

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

//导入组件,非懒加载
// import Home from '../components/home.vue'
// import About from '../components/about.vue'
// import User from '../components/user.vue'

//懒加载
const Home=()=>import('../components/home.vue')
const About=()=>import('../components/about.vue')
const User=()=>import('../components/user.vue')
const News=()=>import('../components/homeNews.vue')

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

Vue.use(VueRouter);

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

//3.将router对象传入到vue实例,然后Main.js中import调用即可
export default router

* 在父组件中内部使用<router-link><router-view>,在router-link中的to 要加上父组件路径拼接子组件，如<router-link to="/home/news"></router-link> 父组件是home，子组件是news

vue-router参数传递

params
- 配置路由格式：/router/:id
- 传递的方式：在Path后面跟上对应的值
- 传递后形成的路径：/router/123,/router/abc
query
- 创建路由文件，定义数据范围，{{$route.query.name}}
- 配置路由格式，/router,router文件夹里，要先注册使用，
- 传递的方式：对象中使用query的key作为传递方式，router-link或者用函数
- 传递后形成的路径：/router?id=123,/router?id=abc
- Register
- url

vue-router导航守卫

每个组件都有生命周期
周期
- created():创建
- mounted()：挂载
- destroyed()：销毁
- updated():界面更新和刷新
- beforecreated()
- …
前卫
- router.beforeEach(to,from,next)
- 比如你想点击时候更改网页标题，常规方法是在每个组件里加上document.title，缺点是太麻烦
- 可以加入meta，然后用守卫

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

//导入组件,非懒加载
// import Home from '../components/home.vue'
// import About from '../components/about.vue'
// import User from '../components/user.vue'

//懒加载
const Home=()=>import('../components/home.vue')
const About=()=>import('../components/about.vue')
const User=()=>import('../components/user.vue')
const News=()=>import('../components/homeNews.vue')
const Test=()=>import('../components/test.vue')

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

Vue.use(VueRouter);

//2.创建vueRouter对象
const routes=[
	{
		path:'',
		redirect:'/home',
		meta:{
			title:'首页'
		}
	},
	{
		path:'/home',
		component:Home,
		children:[
			{
				path:'news',
				component:News,
				meta:{
					title:'新闻'
				}
			}
		]
	},
	{
		path:'/about',
		component:About,
		meta:{
			title:'关于'
		}
	},
	{
		path:'/user/:userid',
		component:User,
		meta:{
			title:'用户'
		}
	},
	{
		path:'/test',
		component:Test,
		meta:{
			title:'测试'
		}
	}
]
const router=new VueRouter({
	//配置路由和组件之间的应用关系
	routes,
	mode: 'history',
})

//导航守卫
router.beforeEach((to,from,next)=>{
	//从from 跳转到next
	document.title=to.meta.title
	next()
})


//3.将router对象传入到vue实例,然后Main.js中import调用即可
export default router