vue3路由机制router_vue3 router.js-优快云博客

路由机制router

路由的基本使用

安装Vue Router：
可以使用npm或yarn安装Vue Router：

npm install vue-router@next

创建路由实例：
在你的主src目录中，创建一个新文件用于路由配置，例如router.js：


//导入创建路由对象需要使用的数据
import { createRouter, createWebHistory } from 'vue-router';

//导入组件
import Home from './views/Home.vue';
import About from './views/About.vue';

//定义路由规则
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

//创建路由对象
const router = createRouter({
  //用于记录路由的历史
  history: createWebHistory(),
  //用于定义多个不同路径和组件之间的对应关系
  routes
});

//导出router
export default router;

创建视图组件：
创建用于不同视图的Vue组件。例如，Home.vue和About.vue。

更新主Vue应用：
在你的主src目录中，更新你的main.js或App.vue以使用路由：

//main.js
import { createApp } from 'vue';
import App from './App.vue';
//导入router路由
import router from './router';

const app = createApp(App);
//在app上应用路由
app.use(router);
//将app挂载在#app上
app.mount('#app');

在组件中使用：
在组件中使用路由来在不同视图之间导航。

<!-- App.vue -->

<template>
  <div id="app">
    <router-view></router-view>
    <!-- 此外还可以使用router-link标签来使得路由跳转 -->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

router-view标签

该标签会被替换成具体的.vue组件
一个视图上可以同时存在多个router-view
每个router-view都可以设置专门用展示那个组件

在多个 <router-view> 中设置指定的组件（命名视图）

//定义包含home，sidebar，footer的路由
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        sidebar: Sidebar,
        footer: Footer
      }
    }
  ]
})

//在APP.vue中设置多个router-view并指定各个标签对应的组件
<router-view></router-view> <!-- 渲染 Home 组件 -->
<router-view name="sidebar"></router-view> <!-- 渲染 Sidebar 组件 -->
<router-view name="footer"></router-view> <!-- 渲染 Footer 组件 -->

编程式路由

通过js来动态的导航到不同的路由

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
});

// 在组件中使用编程式路由导航
const goToAboutPage = () => {
  router.push('/about');
};

const goToContactPage = () => {
  router.push('/contact');
};

路由传参

路径参数
- 在路径中使用一个动态字段来实现
- 如：查看数据详情/showDetail/1，1就是查看详情的id，可以动态添值
键值对参数
- 类似于get请求通过url传参，数据是键值对形式的
- 列如：查看数据详情/showDetail?hid=1,hid=1就是要传递的键值对参数
- 在Vue3和Vue Router 4中，可以使用useRoute这个函数从Vue的组合式API中获取路由对象
- useRoute方法返回的是当前的route对象，可以用来获取关于当前路由的信息

//通过路径参数传参
//使用route.params来接收参数
const routes = [
  //其中:id为占位符，表示了此位置的数据用id来接收
  { path: '/user/:id', component: User }
]

// 在 User 组件中访问路径参数
const User = {
  template: `
    <div>
      User ID: {{ $route.params.id }}
    </div>
  `
}

//通过键值对参数传参
// 假设路由路径为 /user，URL 为 /user?key1=value1&key2=value2
//使用route.query来接收参数
const User = {
  template: `
    <div>
      Key1: {{ $route.query.key1 }}, Key2: {{ $route.query.key2 }}
    </div>
  `
}

//在传递参数的过程中可以使用模板字符串对url进行拼接，也可以通过v-bind属性进行赋值

路由守卫

注意，此处的路由守卫是全局的，即会在整个前端项目中生效

全局前置守卫 (beforeEach): 这个守卫会在路由改变之前被调用。你可以使用它来检查用户是否有权限访问某个页面，或者执行其他一些操作。

在何处配置路由就在那里设置路由守卫一般是router.js文件

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

const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});

//to 下一个页面，from上一个页面，next放行的方法
//若next("/路径")表示路由的重定向
//注意，如果使用了路由的重定向要考虑死循环的问题，当进行路由跳转时会执行前置守卫，然后就可能会一直跳转
router.beforeEach((to, from, next) => {
  // 在路由改变前执行的操作
  // 可以在这里进行权限检查等
  next(); // 必须调用 next() 来继续路由导航
});

export default router;

全局解析守卫 (beforeResolve): 这个守卫会在导航确认之前被调用，也就是在所有组件内守卫和异步路由组件被解析之后。

router.beforeResolve((to, from, next) => {
  // 在导航确认前执行的操作
  next(); // 必须调用 next() 来继续路由导航
});

全局后置守卫 (afterEach): 这个守卫会在导航完成之后被调用，无论导航成功还是失败。

router.afterEach((to, from) => {
  // 导航完成后执行的操作
});

除了全局守卫，你还可以在单个路由配置中定义路由独享的守卫：

const router = createRouter({
  routes: [
    {
      path: '/profile',
      component: Profile,
      beforeEnter: (to, from, next) => {
        // 在进入该路由前执行的操作
        next(); // 必须调用 next() 来继续路由导航
      }
    }
  ]
});