相关理解

vue-router

理解

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

对SPA应用的理解

1. 单个Web应用(single page web application, SPA)。
2. 整个应用只有一个完整的页面。
3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
4. 数据需要通过ajax请求获取。

路由的理解

什么是路由？

1. 一个路由就是一组映射关系 (key——value)。
2. key为路径， value可能是function或者component。

路由分类

后端路由

理解

value是function，用于处理客户端提交的请求。

工作过程

服务器接收到一个请求时，根据请求路径找到匹配的函数类来处理请求，返回响应数据。

前端路由

理解

value是component，用于展示页面内容。

工作过程

当浏览器的路径发生改变时，对应的组件就会显示。

基本路由

基本使用

1. 安装

安装vue-router: npm i vue-router@3
ps: vue-router3只能在vue2中使用，vue-router4在vue3中使用。

2. 应用插件

在main.js里应用插件：

//引入路由
import VueRouter from 'vue-router'
//使用路由
Vue.use(VueRouter)

3. 编写router配置项

创建src/router/index.js

//该文件用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../components/Home'
import About from '../components/About'


//创建并暴露一个路由器
export default new VueRouter({
    routes: [
         {
            path: '/Home',
            component: Home
         },
         {
            path: '/About',
            component: About
         }
    ]
})

4. 使用路由器

在main.js里使用路由器

//引入路由器
import router from './router'
...
// 创建Vue实例对象 
new Vue({
  render: h => h(App),
  router//使用路由器
}).$mount('#app')

5. 实现切换

active-class可以配置高亮样式：

<router-link active-class="active" to="/about">About</router-link>
<router-link active-class="active" to="/home">Home</router-link>

6. 指定展示位置

<router-view></router-view>

注意

1. 路由组件通常存放在pages文件夹，一般组件通常放在components文件夹。
2. 通过切换，隐藏了路由组件，默认是被销毁的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的$router属性获取到。

多级路由

配置

配置路由规则，使用children配置项

routes: [
      {
         path: '/Home',
         component: Home,
         children: [//通过children配置子级路由
            {
               path: 'news', //路由匹配子级时会自动加/，所以这里不能写/news
               component: News
            },
            {
               path: 'message',
               component: Message
            }
         ]
      }
   ]

跳转

<!-- to一定要带上父级路径 -->
<router-link to="/home/news" >News</router-link>

路由的query参数

使用

1. 传递参数

 <!-- 跳转路由并携带query参数，to的字符串写法 -->
<!-- 加:会将""的内容当js模板字符串``去解析，传js变量用${} -->
<router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{ item.title }}</router-link>

<!-- 对象写法（推荐） -->
<router-link
	:to="{
		path: '/home/message/detail',
		query: {
			id: item.id,
			title: item.title
		}
	}">
	{{ item.title }}
</router-link>

2. 接收参数

$route.query.id
$route.query.title

命名路由

作用

在某些情况可以简化路由跳转的代码。

使用

1. 给路由命名

{
	path: 'home',
	component: Home,
	children: [
		path: 'message',
		component: Message,
		children: [
			{
			name: 'Detail',//给路由命名
			path: 'Detail',
			component: Detail
			}
		]
	]
}

2. 简化跳转

<!-- 简化前需要写完整路径 -->
<router-link to="/home/message/detail">跳转</router-link>
<!-- 简化后，直接通过名字跳转 -->
<router-link :to="{name: 'detail'}">跳转</router-link>

<!-- 简化写法配合传递参数 -->
<router-link 
	:to="{
		name: 'detail',
		query: {
			id: 666,
			title: 'hello'
		}
	}"
></router-link>

路由的params参数

使用

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

{
         path: '/Home',
         component: Home,
         children: [
            {
               path: 'news',
               component: News
            },
            {
               path: 'message',
               component: Message,
               children: [
                  {
                     name: 'Detail',
                     path: 'Detail/:id/:title', //:xxx占位符，用于parmas传参
                     component: Detail
                  }
               ]
            }
         ]
      }

2. 传递参数

<!-- 跳转路由并携带params参数，to的字符串写法 -->
<router-link :to="`/home/message/detail/${item.id}/${item.title}`">{{ item.title }}</router-link>

<!-- 跳转路由并携带params参数，to的字符串写法 -->
<!-- !!!!!!! params必须使用name跳转路由，不能使用path !!!!!! -->
<router-link 
	:to="{
		name: 'Detail',
		params: {
			id: item.id,
			title: item.title
		}
	}"
>
{{ item.title }}
</router-link>

路由的props配置

作用： 让路由组件更方便的收到参数。

1. 第一种写法

//
//值为对象，该对象中所有key-value都会以props的形式传给Detail组件
props: {
	a: 1,b: 'hello'
}

2. 第二种写法

//值为布尔值，若布尔值为真，就会把该路由组件收到的pramas参数以props的形式传给Detail组件
props: true

3. 第三种写法

//值为函数，该函数返回的对象种每一组key-value都会通过props传给Detail组件
props($route) {
	return {
		id: $route.query.id,
		title: $route.query.title
	}
}

router-link的replace属性

作用

控制路由跳转时操作浏览器历史记录的模式。
浏览器的历史有两种写入方式：

1. push：追加记录。
2. replace：替换当前记录（不是所有记录，而是当前记录）。
   路由跳转默认为push。

使用

<!-- 完整写法是replace="true"，但是replace的默认值就是true，所以可以直接只写一个replace -->w
<router-link replace ...></router-link>

编程式路由导航

作用

不借助<router-link>实现路由跳转，让路由跳转更加灵活

使用

//push方法跳转
this.$router.push({
	name: 'Detail',
	query: {
		id: item.id,
		title: item.title
	}
})

//replace方法跳转
this.$router.replace({
	name: 'Detail',
	query: {
		id: item.id,
		title: item.title
	}
})

//前进
this.$router.forward()

//后退
this.$router.back()

//前进n步
this.$router.go(n)

缓存路由组件

作用

让不展示的路由组件保持挂载，不被销毁。

使用

1. 缓存一个路由组件

<!-- 不写include则所有该组件的路由都会被缓存 -->
<!-- 要写组件名！而不是路由名 -->
<keep-alive include="News">
	<router-view></router-view>
</keep-alive>

2. 缓存多个路由组件

<keep-alive :include="['News', 'Message']">
	<router-view></router-view>
</keep-alive>

两个新的生命周期钩子

作用

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

使用

activated(){...},//路由组件被激活时调用
deactivated(){...}//路由组件失活时调用

路由守卫

作用

对所有路由进行权限控制。

分类

1. 全局守卫
2. 独享守卫
3. 组件内守卫

全局路由守卫

全局前置守卫

初始化时和每次路由切换之前执行。

// to目的地， from始发地， next到达执行
//必须执行next()才能实现路由跳转
router.beforeEach((to, from, next) => {
   console.log('前置',to, from);
   if(to.meta.isAuth) {//判断是否需要鉴定权限
      if(localStorage.getItem('school') === 'cloud') {
         next()//放行
      }else {
         alert('学校名称不对，无权查看')
      }
   }else {
      next()//放行
   }
})

全局后置守卫

路由切换之后执行。

router.afterEach((to, from) => {
    console.log('后置',to, from);
   //默认title是cloud，路由跳转后根据路由相应的title更改
   document.title = to.meta.title || 'cloud'//修改网页的title
})

独享路由守卫

作用

对某个路由进行权限控制。
只有独享前置守卫，没有独享后置守卫，可以与全局后置守卫配合使用。

beforeEnter(to, from, next) {
	console.log('独享', to, from);
	if (to.meta.isAuth) {//判断是否需要鉴定权限
		if (localStorage.getItem('school') === 'cloud') {
			next()
		}
		else alert('学校名称不对，无权查看')
	}
	else next()

}

组件内路由守卫

1. 通过路由规则，进入该组件时调用。

beforeRouteEnter(to, from, next) {...}

2. 通过路由规则，离开该组件时调用。

beforeRouteLeave(to, from, next) {...}

路由器的两种工作模式

对于一个url来说，什么是hash值？

• #后面的内容就是hash值。

hash值不会包含在HTTP请求当中，即： hash值不会带给服务器。

hash模式

1. 地址中永远带着#号，不美观。
2. 若以后将地址通过第三方手机APP分享，若APP校验严格，则地址会被标记为不合法。
3. 兼容性较好。（But IE已死）

history模式

1. 地址干净、美观。
2. 兼容性比起hash略差。
3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

修改模式

修改模式在路由配置中添加mode属性，默认值是hash。

mode: 'history'

本栏目推荐文章
• VueRouter 路由使用
• vue报错export 'default' (imported as 'VueRouter') was not found in 'vue-router'
• router其实是VueRouter的一个实例，所以它是一个全局对象，包含了所有的子对象和属性
• 1小时学会Vue之VueRouter&Vuex 学习笔记
• vue_vueRouter同组件跳转失败
• Vue3 中 keepAlive 如何搭配 VueRouter 来更自由的控制页面的状态缓存?
• VueRouter4 路由
• 150.vuerouter中的导航钩子函数
• vue3 vueRouter4 ：No match found for location with path ***
• VueRouter

VueRoutervuerouter4 vuerouter-hash vue_vuerouter vuerouter行为 路由vuerouter vuerouter4 vuerouter location match 39 vue-router vue vuerouter vuerouter小时 笔记vuex vue_vuerouter组件vuerouter vue 路由vuerouter4 vuerouter