router
- (一)、载入路由 vue-router
- (二)、路由跳转(4种方式)传参
- (三)路由守卫([参考](https://blog.csdn.net/yujing1314/article/details/101679653?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160389719919195264720382%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160389719919195264720382&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v28_p-1-101679653.pc_first_rank_v2_rank_v28p&utm_term=vue%20%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB%E5%92%8C%E8%B7%AF%E7%94%B1%E6%8B%A6%E6%88%AA%E5%99%A8&spm=1018.2118.3001.4187))
- 3.1、路由钩子函数 beforeEach(全局守卫)、beforeRouteEnter(组件内守卫)[详情介绍](https://blog.csdn.net/ZYS10000/article/details/105896646?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160394175319724813230866%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160394175319724813230866&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v28_p-1-105896646.pc_first_rank_v2_rank_v28p&utm_term=%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%ABvue%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF&spm=1018.2118.3001.4187)
- 3.2、VUEX存放登录信息(token信息)
- 3.3、更改router对象
- 3.3、跳转页面(login.vue)
(一)、载入路由 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
}
})
},