router基础

router基本配置

import Vue from "vue";
import VueRouter from "vue-router";
import A from "../components/A.vue";
import B from "../components/B.vue";
Vue.use(VueRouter);
const routes = [
  {
    path: "/a",
    component: A,
  },
  {
    path: "/b",
    component: B,
  },
];
export default new VueRouter({
  routes,
});

基本写法

<router-link active-class="" to=""></router-link>	router导航
<router-view></router-view>	router展示
<keep-alive include=""> </keep-alive>	保持活跃，组件不销毁(include可选)
replace	替换历史记录(使页面不会后退)
push	追加历史记录(默认)

嵌套(多级)路由

children

配置嵌套(多级)路由

命名路由

name	给路由起名字，可以用此替代path路径
meta	路由元信息(自定义)

query传参

:to="`/b/d/e?title=${i.title}`"	基础写法（不建议）
:to="{             path: '/b/d/e',             query: {               title: i.title,             },           }"	对象写法
$route.query.title	-

params传参

:to="`/b/d/e/${i.title}`"	基础写法（不建议）
:to="{             name: 'abc',             params: {               title: i.title,             },           }"	对象写法(必须使用name，不能使用path)
$route.params.title	-

props传参

props:{}	对象写法（不推荐，数据是固定的）
props: true	布尔值写法，若布尔值为真，就会把该路由组件收到的所有params参数以props的形式传给组件（只适用于params传参）
props($router) {               return {                 title: $router.params.title,               };             }	函数写法

生命周期

activated	路由组件被激活时
activated	路由组件失活时

导航守卫

router.beforeEach((to, from, next) => {})	全局前置路由守卫
router.beforeEach((to, from) => {})	全局后置路由守卫
beforeEnter: (to, from, next) => {}	独享前置路由守卫(只有前置，没有后置)
beforeRouteEnter(to, from, next) {}	组件内进入守卫（通过路由规则进入该组件内时被调用）
beforeRouteLeave(to, from, next) {}	组件内离开守卫（通过路由规则离开该组件内时被调用）

浏览器工作模式

hash	hash模式
history	history模式(项目上线后刷新页面会出现404)
mode	设置浏览器工作模式