路由

前端系统根据页面路径，跳转到指定组件，展示出指定效果使用vite创建vue3项目后，npm install vue-router@4 即可安装vue-router

配置整合

创建并导出路由器

import { createMemoryHistory, createRouter } from 'vue-router'
import Home from "../views/Home.vue";
import Hello from "../views/Hello.vue";
import Haha from "../views/Haha.vue";


// 创建路由表
const routes = [
    { path: '/', component: Home },
    { path: '/hello', component: Hello },
    { path: '/haha', component: Haha },
]
// 创建路由器
const router = createRouter({
    history: createMemoryHistory(),
    routes: routes
})
导出路由器
export default router;

main.js使用路由器

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

router-link router-view

<!--App.vue  -->
<script setup>
</script>

<template>
  <router-link to="/">首页</router-link>
  <router-link to="/hello">hello</router-link>
  <router-link to="/haha">haha</router-link>
  <hr/>
  <router-view/>
</template>

<style scoped>
</style>

：负责导航跳转，通过 to 属性绑定目标路由，支持动态参数和样式定制。

：负责渲染路由对应的组件，支持多视图和过渡动画。

协作流程：用户点击触发路由跳转 → Vue Router 根据路径匹配路由配置 → 动态渲染对应组件。

路径参数

使用 :变量名接受动态参数；这个成为路径参数

{ path: '/haha/:id', component: Haha }

可以在组件中获取路径参数

<template>
<h1>我是哈哈{{$route.params}}</h1>
</template>

嵌套路由

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // 当 /user/:id/profile 匹配成功
        // UserProfile 将被渲染到 User 的 <router-view> 内部
        path: 'profile',
        component: UserProfile,
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 将被渲染到 User 的 <router-view> 内部
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

<template>
<router-link to="/user/777">个人中心</router-link>
</template>

编程式路由

useRoute:路由数据

路由传参跳转到指定页面后，页面需要取到传递过来的值，可以使用 useRoute方法；拿到当前页路由数据；可以做

获取到当前路径
获取到组件名
获取到参数
获取到查询字符串可以在控制台查看路由对象的内容并在路由器中定义相关属性

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query参数
console.log(route.query)
// 打印params参数
console.log(route.params)

userRouter 路由器

拿到路由器；可以控制跳转、回退等。

import {useRoute, useRouter} from "vue-router";

const router = useRouter();

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

//注意： `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) //错误用法 -> /user

路由传参

params参数

params参数即拼接在路径中的参数

  { path: '/haha/:id/:name/:age', component: Haha,name: 'Haha' }

使用params参数可以使用路由器跳转也可以使用router-link跳转

<script setup>
import {useRouter} from "vue-router";
// 使用路由器跳转
const router = useRouter();
function paramsTest(){
  // router.push('/haha/1/chenxin/21');
  router.push({
    name: 'Haha',
    params: {
      id: 1,
      name: 'chenxin',
      age: '21'
    }
  });
}
</script>

<template>
  <router-link to="/">首页</router-link>
  <router-link to="/hello">hello</router-link>
  <router-link to="/haha/1/chenxin/21">haha1</router-link>
<!--传递路由对象的时候要在路由表中指定路由的name并使用name进行跳转  -->
  <router-link :to="{
    name: 'Haha',
    params: {
      id: 1,
      name: 'chenxin',
      age: '21'
    }
  }">haha2</router-link>
  <button @click="paramsTest">跳转</button>
  <router-link to="/user/777">个人中心</router-link>
  <hr/>
  <router-view/>
</template>
<style scoped>
</style>

当跳转当相应组件就可使用useRoute的实例中的param即可或$route获取路由数据

query参数

quert参数同样可以使用useRouter和router-link进行跳转，可以传对象也可直接绑定url

<!-- 直接使用Url  -->
<router-link to="/hello?id=1&name=chenxin">hello1</router-link>
<!--传对象  -->
<router-link :to="{
    path: '/hello',
    query: {
      id: 1,
      name: 'chenxin'
    }
  }">hello2</router-link>

query参数传递可以使用path或name

<script setup>
import { useRoute } from 'vue-router'
let route = useRoute();
</script>

<template>
  <h1>我是Hello
    {{ $route.query.id }} == {{ $route.query.name }}
  </h1>
  <div>
    {{ route.query.id }} == {{ route.query.name }}
  </div>
</template>

<style scoped>
</style>

取值则用query

导航守卫

全局前置导航守卫会在每次地址栏发生变化时生效，判断是否要导航常见的用法即判断是否登录，若登录了才允许跳转可以查询官网查看更多导航守卫

router.beforeEach(async (to, from, next) => {
    //await 后端数据
    // 返回false取消导航
    //返回true则导航
    // 返回路径则跳转指定路径
    if(to.path === '/hello'){
        console.log('禁止访问');
        return "/";
    }
})

Front-end engineering

路由