官网: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
文章来源地址https://www.toymoban.com/news/detail-844663.html
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' import router from './router' const pinia=createPinia(); //将插件添加到 pinia 实例上 pinia.use(piniaPluginPersistedstate) const app=createApp(App); app.use(pinia); app.use(router); app.mount('#app');
app.vue
<script setup> </script> <template> <router-view/> </template> <style scoped> </style>
配置路径别名@
修改路径别名文件:\vuedemo\vite.config.js
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' //导入 node.js path // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { //配置路径别名 '@': path.resolve(__dirname, 'src') } } })
修改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
<script setup> import { useRouter } from 'vue-router'; const router = useRouter() const goTo = ()=> { //router.push("/content?name=张三&age=23") router.push({ path: '/content', query: { name: '李四', age: 26 } }) } </script> <template> <h3>Index页面......</h3> <br> <!-- 编程式导航 --> <button @click="goTo()">编程式导航</button> </template> <style scoped> </style>
content.vue
<script setup> </script> <template> <h3>Content页面.....</h3> <br> Name: {{ $route.query.name }} <br> Age: {{ $route.query.age }} </template> <style scoped> </style>
嵌套路由结合共享组件
添加页面:
\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.toymoban.com/news/detail-844663.html
到了这里,关于04_Vue Router的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!