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文件用来定义路由规则
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
//定义路由
const routes = [
{
path: "/", // http://localhost:5173
component: () => import("../views/index.vue")
},
{
path: "/content", // http://localhost:5173/content
component: () => import("../views/content.vue")
},
]
const router = createRouter({
//使用url的#符号之后的部分模拟url路径的变化,因为不会触发页面刷新,所以不需要服务端支持
//history: createWebHashHistory(),//哈希模式
history: createWebHistory(),
routes })
export default router
main.js 修改
import { createApp } from 'vue'
//导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
import { createPinia } from 'pinia'
//从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'<strong>
import router from './router'</strong>
const pinia=createPinia();
//将插件添加到 pinia 实例上
pinia.use(piniaPluginPersistedstate)
const app=createApp(App);
app.use(pinia);
<strong>app.use(router);</strong>
app.mount('#app');
app.vue
配置路径别名@
修改路径别名文件：\vuedemo\vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'<strong>
import path from 'path' </strong>//导入 node.js path
// https://vitejs.dev/config/
export default defineConfig({
plugins: ,
<strong>resolve: {
alias: { </strong><strong>//配置路径别名
'@': path.resolve(__dirname, 'src'</strong><strong>)
}
}</strong>
})
修改index.js路径
//定义路由
const routes = [
{
path: "/", // http://localhost:5173
component: () => import("@/views/index.vue")
},
{
path: "/content", // http://localhost:5173/content
component: () => import("@/views/content.vue")
},
]这里就是把..修改成@
路径提示设置
添加\vuedemo\jsconfig.json文件
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"] // 配置 @ 符号指向 src 目录及其子目录
}
}
}
路径传递参数
//定义路由
const routes = [
{
path: "/", // http://localhost:5173
component: () => import("@/views/index.vue")
},
{
path: "/content", // http://localhost:5173/content
component: () => import("@/views/content.vue")
},
{
path: "/user/:id",
component: () => import("@/views/user.vue")
},
]访问路径：
http://localhost:5173/content?name=张三&age=23
http://localhost:5173/user/5
<template>
<h3>Content页面.....</h3>
<br>
Name: {{ $route.query.name }} <br>
Age: {{ $route.query.age }}
</template><template>
Id: {{ $route.params.id }} <br>
</template>
index.vue 转到content.vue
index.vue
<template>
<h3>Index页面......</h3>
<br>
<button <strong>@click="goTo()"</strong>>编程式导航</button>
</template>content.vue
<template>
<h3>Content页面.....</h3>
<br>
Name: {{ $route.query.name }} <br>
Age: {{ $route.query.age }}
</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
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
//定义路由
const routes = [
{
path: "/", // http://localhost:5173
alias:["/home","/index"],
component: () => import("@/views/index.vue")
},
{
path: "/content", // http://localhost:5173/content
component: () => import("@/views/content.vue")
},
{
path: "/user/:id",
component: () => import("@/views/user.vue")
},
{
path: "/vip",
component: () => import("@/views/vip.vue"),
children: [ // 子路由
{
path: '', // 默认页 http://localhost:5173/vip
component: import("@/views/vip/default.vue")
},
{
path: 'order', // 会员订单 http://localhost:5173/vip/order
component: import("@/views/vip/order.vue")
},
{
path: 'info', // 会员资料 http://localhost:5173/vip/info
component: import("@/views/vip/info.vue")
}
]
},
{
path: "/svip", // http://localhost:5173/svip
redirect: "/vip" // 重定向
//redirect: { name: 'history', params: { id: '100', name: 'David' } }
},
]
const router = createRouter({
//使用url的#符号之后的部分模拟url路径的变化,因为不会触发页面刷新,所以不需要服务端支持
//history: createWebHashHistory(),
history: createWebHistory(),
routes
})
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】 我们会及时删除侵权内容，谢谢合作！
页:
[1]