Vue-Router
一、安装
npm install vue-router@3
- 确保安装 Vue Router 的版本与你的 Vue 版本兼容。例如,
vue-router@4
是为 Vue 3 设计的,而vue-router@3
是为 Vue 2 设计的。如果你使用 Vue 3,应安装vue-router@4
。
二、使用
-
在router文件夹下新建index.js导入路由:
createRouter
和createWebHistory
:确保你导入了createWebHistory
函数,并且没有拼写错误。import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: "/", // 根路径 components: () => import("../views/vouters/index.js") //导入路径 } ] const router = createRouter({ history: createWebHistory(), //也可以createWebHashHistory,会在根路径后加#,不用刷新,不需要服务器,即#后面的内容客户端自己处理,前面的由服务器响应 routes /*导入的规则*/ }) export default router //到处路由
-
在main.js中注册
import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router); app.mount('#app');
-
在App.vue的templeate标签写写
- main.js是程序执行入口,在这里注册使用路由,全局可以访问。打开默认是使用的路由的根路径
三、配置路径别名@和vscode路径提示
-
配置路径别名
-
vite.config.js
import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import path from 'path'; export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, 'src') } } });
-
-
@vscode提示
-
新建一个jsconfig.json文件,如果是ts就是tsconfig.json
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } }
-
四、使用查询字符串或路径传递参数
-
查询字符串
- 在路由定义的路径中最后加上?给上变量值,该路径的变量就会拿到该值
<template> <div> id: {{ $route.query.id }} </div> </template>
-
路径传递参数
-
在路径定义后加入\分割找到了对应路径,:<变量名>代表传入参数, ?代表可以忽略
const routes = [ { path: "/user/:id/name/:name?", component: () => import("../views/User.vue") } ];
-
五、router-link、定义别名、定义路由名称、编程式导航
-
别名
-
定义别名是使用alias属性,也可以是数组
path: "/content", alias: "test";
-
-
router-link
-
进行路由的跳转
path: "/user", name: "memnber"
<router-link to="/content?id=100&title=test">查询字符串传参</router-link> <router-link to="/user/007/name/ha9">路径传参</router-link> <router-link :to="{path: '/content', $query:{id:100, title:test}}">动态传参--查询字符串传参</router-link> <router-link :to="{name: 'memnber', $param:{id:200, name:ha9}">动态传参--路径传参</router-link>
- 路径传参显示的不是别名,查询字符串是别名
-
-
编程式导航
-
使用
router.push
import { userRouter } from 'vue-router' const router = useRouter() const goTo = () => { router.push("<路径>") }
-
编程式导航:就是不通过用户交互而进行链接跳转
-
六、嵌套路由共享组件
-
即路由底下还分为多个子路由,需要在父路由中添加
{ path: "/vip", component: () => import("../views/Vip.vue"), children: [ { path: "", component: () => import("../views/Default.vue") // 默认子路由,默认跳转到这个界面 }, { path: "order", component: () => import("../views/Order.vue") } ] }
// vip.vue <template> <router-view></router-view> </template>
七、重定向
-
父路由使用别的父路由
{ path: "/vip", component: () => import("@/views/vip.vue"), children: [ { path: "/vip", component: () => import("@/views/default.vue"), //默认跳转到这个界面 }, { path: "/order", component: () => import("@/views/order.vue"), } ] }, { path: "/svip", redirect: {name:'member', params:{id:200, name:'ha9'}} // 和编程式导航类似 }
八、全局全置守卫
-
后端:前置中间件
-
对特定路由进行拦截,一般不会在前端写拦截,因为浏览器控制台就可以注入js代码
// main.js router.beforeEach(to, from, next) => { console.log("to:", to) //即将进入的路由信息 console.log("from", from) //当前即将离开的路由信息 if (to.name == "history") { next(false) // 对name==history的路由进行拦截 } else { next(true) } }
-
Other
-
路由控制:只有通过路由定义的路径才能访问,方便路径管理和访问控制。
-
路由拦截:一般不会在前端写拦截,因为浏览器控制台就可以注入js代码
-
根路径是直接默认访问的,可以通过重定向实现默认访问
const routes = [ { path: "/", component: () => import("@/layouts/MainLayout.vue"), children: [ { path: "", redirect: "default" // 默认重定向到子路由 }, { path: "default", component: () => import("@/views/Default.vue") }, // 其他子路由 ] } ]; const routes = [ { path: "/", component: () => import("@/layouts/MainLayout.vue"), redirect: "default", // 默认重定向到子路由 default children: [ { path: "default", component: () => import("@/views/lt.vue") // 这里是你的目标组件 }, // 其他子路由 ] } ];
重定向到子路由的路径是相对于父路由的路径,不需要前缀
/
。 -
path路径都是相对父类到子类的,可以不重复写父类的路径
-
重定向可以重定向父路由