04_Vue Router

天野之城

官网：Vue Router | Vue.js 的官方路由 (vuejs.org)
安装命令：npm install vue-router@4
1.添加两个页面\vuedemo\src\views\index.vue、\vuedemo\src\views\content.vue
2.添加\vuedemo\src\router\index.js文件用来定义路由规则

1. import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
3. //定义路由
4. const routes = [
5.     {
6.         path: "/", // http://localhost:5173
7.         component: () => import("../views/index.vue")
8.     },
9.     {
10.         path: "/content", // http://localhost:5173/content
11.         component: () => import("../views/content.vue")
12.     },
13. ]
15. const router = createRouter({
16.     //使用url的#符号之后的部分模拟url路径的变化,因为不会触发页面刷新,所以不需要服务端支持
17.     //history: createWebHashHistory(),  //哈希模式
18.     history: createWebHistory(),
19.     routes })
21. export default router

复制代码

 
main.js 修改

1. import { createApp } from 'vue'
3. //导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
4. import { createPinia } from 'pinia'
5. //从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate
6. import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
7. import App from './App.vue'<strong>
9. import router from './router'</strong>
11. const pinia=createPinia();
12. //将插件添加到 pinia 实例上
13. pinia.use(piniaPluginPersistedstate)
15. const app=createApp(App);
16. app.use(pinia);
17. <strong>app.use(router);</strong>
18. app.mount('#app');

复制代码

 
app.vue

1. [/code] 
2. [b]配置路径别名@[/b]
3. 修改路径别名文件：\vuedemo\vite.config.js
4. [code]import { defineConfig } from 'vite'
5. import vue from '@vitejs/plugin-vue'<strong>
6. import path from 'path' </strong>//导入 node.js path
8. // https://vitejs.dev/config/
9. export default defineConfig({
10.   plugins: [vue()],
11.   <strong>resolve: {
12.     alias: { </strong><strong>//配置路径别名
13.       '@': path.resolve(__dirname, 'src'</strong><strong>)
14.     }
15.   }</strong>
16. })

复制代码

 
 修改index.js路径

1. //定义路由
2. const routes = [
3.     {
4.         path: "/", // http://localhost:5173
5.         component: () => import("@/views/index.vue")
6.     },
7.     {
8.         path: "/content", // http://localhost:5173/content
9.         component: () => import("@/views/content.vue")
10.     },
11. ]

复制代码

这里就是把..修改成@
 
路径提示设置
添加\vuedemo\jsconfig.json文件

1. {
2.     "compilerOptions": {
3.       "baseUrl": ".",
4.       "paths": {
5.         "@/*": ["src/*"] // 配置 @ 符号指向 src 目录及其子目录
6.       }
7.     }
8.   }

复制代码

 
路径传递参数

1. //定义路由
2. const routes = [
3.     {
4.         path: "/", // http://localhost:5173
5.         component: () => import("@/views/index.vue")
6.     },
7.     {
8.         path: "/content", // http://localhost:5173/content
9.         component: () => import("@/views/content.vue")
10.     },
11.    
12.     {
13.         path: "/user/:id",
14.         component: () => import("@/views/user.vue")
15.     },
16. ]

复制代码

访问路径：
http://localhost:5173/content?name=张三&age=23
http://localhost:5173/user/5

1. <template>
2. <h3>Content页面.....</h3>
3. <br>
4. Name: {{ $route.query.name }} <br>
5. Age: {{ $route.query.age }}
6. </template>

复制代码

1. <template>
2. Id: {{ $route.params.id }} <br>
3. </template>

复制代码

 
 
index.vue 转到content.vue
index.vue

1. <template>
2. <h3>Index页面......</h3>
3. <br>
5. <button <strong>@click="goTo()"</strong>>编程式导航</button>
6. </template>

复制代码

content.vue

1. <template>
2. <h3>Content页面.....</h3>
3. <br>
4. Name: {{ $route.query.name }} <br>
5. Age: {{ $route.query.age }}
6. </template>

复制代码

 
嵌套路由结合共享组件
添加页面：
\vuedemo\src\views\vip.vue
\vuedemo\src\views\vip\default.vue
\vuedemo\src\views\vip\info.vue
\vuedemo\src\views\vip\order.vue
\vuedemo\src\views\svip.vue
修改index.js

1. import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
3. //定义路由
4. const routes = [
5.     {
6.         path: "/", // http://localhost:5173
7.         alias:["/home","/index"],
8.         component: () => import("@/views/index.vue")
9.     },
10.     {
11.         path: "/content", // http://localhost:5173/content
12.         component: () => import("@/views/content.vue")
13.     },
14.    
15.     {
16.         path: "/user/:id",
17.         component: () => import("@/views/user.vue")
18.     },
19.     {
20.         path: "/vip",
21.         component: () => import("@/views/vip.vue"),
22.         children: [ // 子路由
23.             {
24.                 path: '', // 默认页 http://localhost:5173/vip
25.                 component: import("@/views/vip/default.vue")
26.             },
27.             {
28.                 path: 'order', // 会员订单 http://localhost:5173/vip/order
29.                 component: import("@/views/vip/order.vue")
30.             },
31.             {
32.                 path: 'info', // 会员资料 http://localhost:5173/vip/info
33.                 component: import("@/views/vip/info.vue")
34.             }
35.         ]
36.     },
37.     {
38.         path: "/svip", // http://localhost:5173/svip
39.         redirect: "/vip" // 重定向
40.         //redirect: { name: 'history', params: { id: '100', name: 'David' } }
41.     },
42. ]
44. const router = createRouter({
45.     //使用url的#符号之后的部分模拟url路径的变化,因为不会触发页面刷新,所以不需要服务端支持
46.     //history: createWebHashHistory(),
47.     history: createWebHistory(),
48.     routes
49. })
51. export default router

复制代码

访问：http://localhost:5173/vip/、http://localhost:5173/vip/info、http://localhost:5173/svip/ (重定向)
 

来源:https://www.cnblogs.com/MingQiu/p/18122381
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！