vue项目中router路由相关知识

作用：vue+router用来实现单应用页面SPA（Single Page Application）页面跳转
单应用页面=》整个项目只有一个html页面，不适合做SEO搜索引擎（nuxt.js适合做SEO），后台管理系统项目适合
router官网：https://v3.router.vuejs.org/zh/api/
安装：

npm install vue-router

使用：在src下心间router/index.js文件

import Router from "vue-router";
import Vue from "vue";
import Home from "../views/home.vue";
Vue.use(Router);

const routes = new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },//一般首页直接引入
    {
      path: "/about",
      name: "about",
      component: () => import("../views/about.vue"),
    },//懒加载按需加载提升性能
  ],
});
const router = new Router({
  mode: "history",//”hash“两种模式
  base: process.env.BASE_URL,
  routes,
});
export default router;

面试题：路由的模式有几种，有什么区别
history"和”hash“两种
区别：

1. 浏览器行为：当请求路径找不到时，history模式会发送一次get请求，hash模式不会额外发送请求；
2. URL结构不同：hash模式请求是路径上会带“#”号，history模式比hash模式颜值更高更美观
3. 服务器支持：hash模式不需要服务器特别配置，而 history 模式需要服务器配置以正确处理所有路由
4. SEO：history模式支持服务器端渲染，有利于搜索引擎优化（SEO），而 hash 模式则不支持。
5. 兼容性：hash模式兼容性更好，因为它不依赖于 HTML5 的 History API，老旧浏览器兼容。

路由懒加载分包和配置404页面
打包项目运行：npm run build 打包文件dist文件里的js文件显示是一串数字还是对应路由name，就要设置 webpackChunkName

import Router from "vue-router";
import Vue from "vue";
import Home from "../views/home.vue";
import Redirect from "../views/redirect404.vue";
Vue.use(Router);

const routes = new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },//一般首页直接引入
    {
      path: "/about",
      name: "about",
      component: () => import(/* webpackChunkName: "about" */ "../views/about.vue"),
    },//懒加载按需加载提升性能
    {
      path: "*",
      component: Redirect,
    },//配置404页面
  ],
});

子路由和动态路由

import Router from "vue-router";
import Vue from "vue";
import Home from "../views/home.vue";
import  Movie from "../views/movie.vue";
const routes = new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },//一般首页直接引入
    {
      path: "/about",
      name: "about",
      component: () => import(/* webpackChunkName: "about" */ "../views/about.vue"),
      children: [
        {
          path: "child",
          name: "child",
          component: () => import(/* webpackChunkName: "about" */ "../views/child.vue"),
        },//子路由
        { 
        path: '/movie/:id', 
        component: Movie,
        props: true
          }//动态路由
      ],
    }
  ],
});

展示页面

//template方式：
	<router-link to="/about">跳转到about</router-link>
    <router-link :to={name:"home",path:"/home"}>跳转到news</router-link>
    /*带查询参数，下面的结果为 /register?plan=private*/
	<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
   /*常用的属性
   to:表示目标路由的链接
   tag:有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
   replace:设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
   active-class:默认值: "router-link-active",设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
   */
//js方式
	this.$router.push（）//插入跳转路径A-》B，还可以B返回A
 	this.$outer.replace（）//插入跳转路径A-》B，不能返回
  	this.$router.go（-1）//-1返回上一页，0表示当前页，1表示下一页
  	this.$router.back（）//返回上一页
//vue3中  useRouter=>this.$router,  useRoute=>this.$route
import { useRouter,useRoute } from 'vue-router'
let router = useRouter()

路由守卫
适用场景：进入某个页面，前置需要判断用户是否登陆，登陆状态可以进入页面，不是登陆状态不能进入该页面则进入登陆页面

全局导航守卫
router.beforeEach（前置）
router.beforeResolve（解析）
router.afterEach（后置）

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next()
  } else {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/login')
    }
  }
})

路由独享的守卫
router.beforeEnter

{
    path: "/about",
    name: "about",
    beforeEnter(to, from, next) {
      console.log(to);///about
      console.log(from);//home
      if（token!==''）{
      	next();//跳转到about页面
      }else {
      	 next('/login');//跳转到login页面
      }
    },
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/about.vue"),
  }
  /**？
   * to：要去那个路由对象
   * from：当前路由对象
   * next() /ok符合身份
   * next('/login')跳转到对应组件
   */
})

组件内导航守卫
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave