VUE学习（四）router、路由传参、路由守卫基于token

（一）、载入路由 vue-router

路由的基本使用
mian.js中

import router from "./router";

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

去掉url地址栏中的“#”我们可以用路由的 history 模式

import Vue from "vue"
import VueRouter from "vue-router"
import Home from "../views/Home.vue"
Vue.use(VueRouter)
const routes = [
	{
		path: "/home",
		name: "Home",
		component: Home,
		meta: { name: "首页" },
	}
]
const router = new VueRouter({
	mode: "history", // 去掉url地址栏中的“#”
	routes,
})
export default router

（二）、路由跳转（4种方式）传参

2.1、router-link（组件调用）相当于ab标签

详细参考

2.1.1. 不带参数

<router-link to="/home">Home</router-link>
<router-link :to="{path:'/home'}"> Home</router-link>
<router-link :to="{home'}"> Home</router-link>
<router-link :to="{name:'home'}"> Home</router-link>
//name,path都行, 建议用name 
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。

2.1.2.带参数

<router-link :to="{name:'home', params: {id:1}}"> Home</router-link>
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id

<router-link :to="{name:'home', query: {id:1}}"> 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id

2.2、 this.$router.push() router-link（函数里面调用）

2.2.1、不带参数

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

2.2.2、query传参 （类似get传参）

// 发起页面
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})

// 路由配置 
1.path: "/home/:id"
2.path: "/home:id" 
3.path: "/home"

// html 取参 $route.query.id
// script 取参 this.$route.query.id

// 跳转转收页面的时候,地址栏会显示:
http://ip:port/home?id=1

2.2.3、params传参(类似post传参)

// 发起页面
 this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
 
// 路由配置 
1.path: "/home/:id"
2.path: "/home:id" 
3.path: "/home"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留

// html 取参 $route.params.id
// script 取参 this.$route.params.id

//  跳转转收页面的时候,地址栏显示目的地址,不带任何参数

2.2.4、location预声明参数模式

// 发起页面
this.$router.push({path:'/home/222'})
 
// 路由配置 
1.path: "/home/:id"

// html 取参 $route.params.id
// script 取参 this.$route.params.id

// 路由跳转时,url会显示:
http://ip:port/home/222

2.2.5、query和params区别

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用query刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

2.3、this.$router.replace() (用法同上,push)

2.4、this.$router.go(n) ()

向前或者向后跳转n个页面，n可为正整数或负整数

（三）路由守卫（参考）

路由验证和相应拦截的使用

3.1、路由钩子函数 beforeEach（全局守卫）、beforeRouteEnter（组件内守卫）详情介绍

利用 router.beforeEach( (to, from, next) => { }

钩子函数beforeEach三个参数的意义：
to：即将要进入的目标的路由对象
from：当前导航即将要离开的路由对象
next：调用该方法后, 才能进入下一个钩子
next(’/路径’) 指定某个路径
to(即将要跳转到的地址)、from(当前地址)、next（回调），中文释义就是“从哪里去哪里”。例如从/A跳转到/B，to 就是/B from 就是/A。

3.2、VUEX存放登录信息（token信息）

首先，在vuex里的store.js里边写一个存放登录（token）状态，代码如下：
state：

// 用户信息
userInfo: undefined,
// 存储token
Authorization: localStorage.getItem("Authorization")?localStorage.getItem("Authorization"): "",

mutations：

// 登录
login(state, userInfo) {
	state.userInfo = userInfo
},
// 登出
logout(state, userInfo) {
	state.userInfo = userInfo
},
// 设置用户信息
setUserInfo(state, userInfo) {
	state.userInfo = userInfo
	state.Authorization = userInfo.Authorization
	localStorage.setItem("Authorization", userInfo.Authorization) // 把token存入localStorage
},

3.3、更改router对象

需要验证的路由：requireAuth: true

const routes = [
	{
		path: "/home",
		name: "Home",
		meta: { requireAuth: true, name: "首页" },
		component: Home,
	},
}

3.3、跳转页面（login.vue）

// 登录
login() {
	this.$refs.loginForm.validate((valid) => {
		// 登录验证成功
		if (valid) {
			let userInfo = {
				name: "admin",
				id: "123456",
				passwrod: "0",
				Authorization: "asdasdasdasdasdasd",
			}
			this.$store.commit("setUserInfo", userInfo) // 储存用户信息
			// 判断是否为路由守卫传参跳转页面
			if (this.$route.query.redirect) {
				this.$router.push(this.$route.query.redirect)
			} else {
				this.$router.push("/home")
			}
		} else {
			// 登录验证失败
			console.log("error submit!!")
			return false
		}
	})
},