Vue Router 快速上手

快速上手

安装

npm install vue-router@4

基本用法

创建路由文件：在 /src/route 下创建 index.js 路由文件

import { createRouter, createWebHashHistory } from 'vue-router';

// routes为一个数组
const routes = [
  {
    path: '/',
    name: 'Home',
    // component为单数形式
    component: () => import(/* .webpackChunkName: "home" */ '../views/Home/Home');  // 路由懒加载
  }
]

const router = createRouter({
  history: createWebHashHistory(),  // 以哈希方式控制路由
  routes
});

export default router;

声明路由占位符：<router-view></router-view>

导入路由：在 index.js 中导入 路由文件

import router from './route/index'
const app = createApp(App);
app.use(router);

页面跳转

声明式

<!-- 1. 直接通过路由地址跳转 -->
<router-link to="/home">Home</router-link>

<!-- 2. 对象中带 path 的方式跳转 -->
<router-link :to="{path: '/home'}">Home</router-link>

<!-- 3. 对象中带 name 的方式跳转 -->
<router-link :to="{name: 'Home', params: { id: 1 }}">home</router-link>

编程式

// 1. 字符串
router.push('/Home')

// 2. 使用对象中带path的方式跳转
router.push({ path: '/Home'})

// 3. 对象中带name的方式跳转
router.push({ name: 'Home'});

// 4. 前进或后退
router.go(数字)

嵌套路由

声明嵌套路由：

<router-link to="/about/one">One</router-link>
<router-link to="/about/two">Two</router-link>

在路由文件中配置children属性：

routes: [{
  path: '/about',
  component: About,
  children: [
    // children中的path不加/
    { path: 'one', component: AboutOne },
    { path: 'two', component: AboutTwo }
]}]

动态路由

定义：指Hash地址中可变的部分定义为参数项，可以通过“：”来定义

例如：{ path: '/movie/:id', component: Movie, props: true }

获取参数项：

1. 通过 route.params.id 的形式直接获取
2. 通过配置 props: true，使用 props 的形式获取

动态路由跳转：

<!-- 声明式 -->
<router-link to="/home/1">Home</router-link> 
<router-link :to="{name: 'Home', params: { id: 1 }}">Home</router-link>

// 编程式
router.push("/home/1")
router.push({ name: 'Home', params: { id:1 }})

导航守卫

全局前置守卫

// to为目标路由，from为正要离开的路由
// next为一个函数，表示放行，若不声明，默认允许访问每一个路由，若已声明，需要使用next()进行放行
// 强制停留在当前页面：next(false)
// 强制跳转到指定页面：next('/login) 或 next({ name: 'Login' })
router.beforeEach((to, from, next) => {
  const { isLogin } = localStorage;
  const { name } = to;
  const isLoginOrRegister = name === 'Login' || name === 'Register';
  // 若未登录，且访问的不是登录/注册页面，则跳转至登录页
  isLogin || isLoginOrRegister ? next() : next({ name: 'Login' });
});

路由独享的守卫

const route = [{
  path: '/login',
  name: 'Login',
  component: () => import(/* .webpackChunkName: "login" */ '../views/Login/Login'),
  // 访问登录页时，若已经登录，则跳转到Home组件
  beforeEnter(to, from, next) {
    const { isLogin } = localStorage;
    isLogin ? next({ name: 'Home' }) : next();
  }
}]

其他常见配置

重定向

routes: [{ path: '/', redirect: '/home' }]

获取激活路由

默认类名：router-link-active

自定义类名：在 router.js 中通过 linkActiveClass 属性指定自定义类名

使用 Router

Option API

在 Vue2 中，可以通过 this.$route 与 this.$router 直接进行访问 Router，而到了 Vue3 的 CompositionAPI，setup()函数中无法直接访问 this。

Composition API

1. 导入 useRoute 与 useRouter 函数

   import { useRouter, useRoute } from 'vue-router'

2. 在 setup 中调用 useRoute 与 useRouter 函数

   const router = useRouter();
   const route = useRoute();