路由进阶
1>路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
解决方法:
1.1若是动态匹配页面，只需要在路由参数中加入props:true即可。
import Home from "@/views/Home.vue"; export default [ { path: "/argu/:name", name:"argu", component: () => import("@/views/argu.vue"), props:true//可以进行路由组件传参 } ];
<template> <div> <!-- 拿到动态路由的参数 --> <!-- {{$route.params.name}} --> <!-- 尽量使用这种方法，不要使用this.$route.paramas,让组件和路由解耦尽量不要在组件中使用$routes,$router方法 --> {{name}} </div> </template> <script> export default { // props:{ name:{ type:String, default:"caoqi" } } }; </script>
2.如果是普通的页面，则也可使用props对象格式传递：
import Home from "@/views/Home.vue"; export default [ { path: "/about", name: "about", // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ "@/views/About.vue"), //如果是空对象则显示apple //props:{}, props: { food:'banaa' } }, { path: "/argu/:name", name:"argu", component: () => import("@/views/argu.vue"), props:true//可以进行路由组件传参 } ];
<template> <div class="about"> <h1>This is an about page</h1> <b>{{ food }}</b> </div> </template> <script> export default { props:{ food:{ type:String, default:"apple" } } } </script>
3.如果是普通的页面，还可以使用props函数模式传递，这种情况适合于根据地址参数做一些逻辑：
import Home from "@/views/Home.vue"; export default [ { path: "/", alias:'/home_page', name: "home", //加上name属性 命名路由 component: Home, props: route => ({ food:route.query.food }) } ];
<template> <div class="home"> <b>{{ food }}</b> <button @click="handleClick('back')">返回上一页</button> <button @click="handleClick('push')">跳转到parent</button> <button @click="handleClick('replace')">替换到parent</button> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'home', components: { HelloWorld }, props:{ food:{ type:String, default:"apple" } }, methods:{ handleClick(type){ if (type==="back") { //this.$router.back(); this.$router.go(-1); }else if (type==="push") { const name="caoqi"; //使用push会在浏览器中加入一个记录 //使用路径跳转 //this.$router.push("/parent"); //还可以使用命名路由的方式： this.$router.push({ // name: "parent", // //加入name参数,http://localhost:8080/#/parent?name=caoqi // query: { // name: 'caoqi' // } // name: "argu", // //加入name参数,http://localhost:8080/#/argu/caoqi // params: { // name: 'caoqi' // } //ES6写法： path:`/argu/${name}`, }) }else if (type==="replace") { //使用replace不会在浏览历史中加入记录 this.$router.replace({ name: 'parent' }) } } } } </script>
2>HTML histoty模式
import Vue from "vue"; import Router from "vue-router"; import routes from "./router"; Vue.use(Router); export default new Router({ //mode:'hash',//默认模式 mode:'history', routes: routes });
3>导航守卫(路由守卫)
路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。
官方api地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
3.1 全局守卫
3.1.1 全局前置守卫
import Vue from "vue"; import Router from "vue-router"; import routes from "./router"; Vue.use(Router); const router = new Router({ routes }); const HAS_LOGINED = false; //全局前置守卫 /* to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子 */ //模拟登陆验证逻辑:当跳转页面为登陆页面且已经登陆时，直接跳转到home页面，如果跳转页面不为登录页且已经登陆，则继续执行，否则直接跳转到登录页 router.beforeEach((to, from, next) => { if (to.name !== "login") { if (HAS_LOGINED) next(); else next({ name: "login" }); } else { if (HAS_LOGINED) next({ name: "home" }); else next(); } }); export default router;
3.1.2 全局后置钩子
3.2 路由独享的守卫
import Home from "@/views/Home.vue"; export default [ { path: "/", alias: "/home_page", name: "home", //加上name属性 命名路由 component: Home, props: route => ({ food: route.query.food }), beforeEnter: (to, from, next) => { // if (from.name === "about") alert("这是从about来的"); // else alert("这不是从about来的"); next(); } } ];
3.3 组件内的守卫
<template>
<div class="home">
<b>{{ food }}</b>
<button @click="handleClick('back')">返回上一页</button>
<button @click="handleClick('push')">跳转到parent</button>
<button @click="handleClick('replace')">替换到parent</button>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
},
props:{
food:{
type:String,
default:"apple"
}
},
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
next(vm => {
//若想使用实例，可使用这种方法
console.log(vm)
})
},
//这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
beforeRouteLeave (to, from, next) {
// const leave = confirm('您确定要离开吗？')
// if (leave) next()
// else next(false)
next()
}
}
</script>
4>路由元信息
import Home from "@/views/Home.vue"; export default [ { path: "/", alias: "/home_page", name: "home", //加上name属性 命名路由 component: Home, props: route => ({ food: route.query.food }), beforeEnter: (to, from, next) => { // if (from.name === "about") alert("这是从about来的"); // else alert("这不是从about来的"); next(); } }, { path: "/about", name: "about", // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ "@/views/About.vue"), props: { food: "banaa" }, meta: { title: '关于' } } ];
index.js
import Vue from "vue"; import Router from "vue-router"; import routes from "./router"; import { setTitle } from "@/lib/util"; Vue.use(Router); const router = new Router({ routes }); const HAS_LOGINED = true; //全局前置守卫 /* to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子 */ //模拟登陆验证逻辑:当跳转页面为登陆页面且已经登陆时，直接跳转到home页面，如果跳转页面不为登录页且已经登陆，则继续执行，否则直接跳转到登录页 router.beforeEach((to, from, next) => { to.meta && setTitle(to.meta.title); if (to.name !== "login") { if (HAS_LOGINED) next(); else next({ name: "login" }); } else { if (HAS_LOGINED) next({ name: "home" }); else next(); } }); export default router;
util.js
export const setTitle = (title) => { window.document.title = title || 'admin' }
