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' }
)