Vue-Router4.x

两种模式

hash

• 表现形式：有’#’
• hash通过监听浏览器的onhashchange（）事件变化，查找对应的路由规则

history

• 表现形式：无’#’
• 利用了HTML5 History Interface中新增的pushState（）和replaceState（）方法

router-link常用属性

to

• 表示目标路由的链接
• 当被点击后，内部会立刻把to的值传到router.push（）
• 这个值可以是个string或者描述目标位置的对象

<router-link to='/home'>Home</router-link>

//命名的路由
<router-link to="{name:'Home',params:{id:'123}}">Home</router-link>

active-class

• 链接激活时，应用于渲染a的class
• 默认值：.router-link-active或者全局linkActiveClass

<template>

 - List item

  <div>
    <!-- 导航 -->
    <div id="nav">
      <router-link to="/home" active-class='current'>首页</router-link>
      <router-link to="/mine" active-class='current'>我的</router-link>
    </div>

    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>

/*自己设置类名*/
.current {
  font-size: 18px;
  font-weight: bold;
  color: aqua;
}

/* 默认选中样式类 */
.router-link-active{
  font-size: 18px;
  font-weight: bold;
  color: aqua;
}

• 简化写法：路由实例中配置属性
  

replace

• 设置replace属性，当点击时，会调用router.replace（），而不是 router.push（）
• 导航后不会留下历史记录

<router-link to="/home" replace>首页</router-link>

JS实现路由跳转

<button @click="home">首页</button>
<button @click="mine">我的</button>

import { useRouter } from 'vue-router'
export default {
  setup () {
    const router = useRouter()
    
    const home = () => {
      router.push('/home')
    }

    const mine = () => {
      router.push('/mine')
    }

    return {
      home, mine
    }
  }
}

动态路由

• 比如：/news/001、/news/002
• /news是固定的，后边的 id不固定
• {path：’/news/:id’,component:News}

<router-link :to="'/news/'+newsId">新闻详情</router-link>

import {ref} from 'vue'
export default {
   setup(){
     const newsId=ref('001')
     return {
       newsId
     }
   }
}

<!--新闻详情页面代码-->
<template>
  <div id="news">
      <p>id:{{$route.params.id}}</p>
      <p>{{newsId}}</p>
  </div>
</template>

import {useRoute} from 'vue-router'
import {computed} from 'vue'
export default{
 setup(){
     const route=useRoute()

     const newsId=computed(()=>{
        return route.params.id
     })
    return {
       newsId
    }
 }
}

路由懒加载

//router/index.js
import Home from '../component/Home.vue'
import Mine from '../component/Mine.vue'
import News from '../component/News.vue'

const routes = [
  { path: "/", redirect: "/home" },
  { path: "/home", component: Home },
  { path: "/mine", component: Mine },
  { path: "/news/:id", component: News },
];

修改为以下代码：

const routes = [
  { path: "/", redirect: "/home" },
  { path: "/home", component: () => import("../components/Home.vue") },
  { path: "/mine", component: () => import("../components/Mine.vue") },
  { path: "/news/:id", component: () => import("../components/News.vue") },
];

路由嵌套

• 比如：在我的（/mine）页面中，有我的订单（/mine/order）、我的消息（/mine/msg）
• 使用步骤：
• 1.创建对应的组件：MineMsg.vue、MineOrder.vue
• 2.router/index.js

{
    path: "/mine",
    component: () => import("../components/Mine.vue"),
    children: [
      //设置默认重定向
      //{ path: "/mine", redirect: "/mine/msg" },
      {
        path: "msg",
        component: () => import("../components/MineMsg.vue"),
      },
      {
        path: "order",
        component: () => import("../components/MineOrder.vue"),
      },
    ],
  },

• 3.Mine.vue

<template>
  <div>
    <router-link to="/mine/msg">我的消息</router-link>
    <router-link to="/mine/order">我的订单</router-link>
    <router-view></router-view>
  </div>   
</template>

• 4.设置默认重定向

{path:'/mine',redirect:'/mine/order'}

参数传递

传递参数的两种方式

params

query

params类型

配置路由格式 ：/router/:params

传递方式 ：在path后面跟上传递的参数

传递后形成路径 ：/router/001、/router/002

query类型

配置路由格式 ：/router

传递方式 ：对象中使用query的key作为传递方式

传递后形成路径 ：/router?id=001、/router?id=002

router与route

router

• router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到的一个实例对象
• 这个对象中是一个全局的对象，包含了所有路由包含了许多关键的对象和属性

route

• route是一个跳转的路由对象，每个路由都会有一个route对象，是一个局部的对象
• 可以获取对应的name、path、params、query等

路由（导航）守卫

全局路由前置守卫

/eg：不同页面设置不同的标题
//router/index.js
const routes=[{
    path: "/home",
    component: () => import("../components/Home.vue"),
    meta: { title: "首页" },
    //配置meta:路由元信息
  }]


//全局路由前置守卫
router.beforeEach((to, from, next) => {
  /* must call `next` */
  // console.log(to);
  // console.log(from);
  document.title = to.meta.title;
  //放行
  next();
});

全局路由后置钩子

router.afterEach((to, from) => {
});

keep-alive

keep-alive是Vue的一个内置组件，可以使被包含的组件保留状态，避免被重新渲染

<!--vue2写法-->
<keep-alive>
   <router-view></router-view>
</keep-alive>

<!--vue3写法-->
<router-view v-slot="{ Component }">
   <keep-alive name="fade">
      <component :is="Component" />
   </keep-alive>
</router-view>

常用属性

include–srting | RegExp | Array 只有名称匹配的组件会被缓存

exclude–srting | RegExp | Array 任何名称匹配的组件都不会被缓存

max–number | string 最多可以缓存多少组件实例