04_Vue Router

  • 04_Vue Router已关闭评论
  • 27 次浏览
  • A+
所属分类:.NET技术
摘要

官网:Vue Router | Vue.js 的官方路由 (vuejs.org)安装命令:npm install vue-router@41.添加两个页面vuedemosrcviewsindex.vue、vuedemosrcviewscontent.vue

官网:Vue Router | Vue.js 的官方路由 (vuejs.org)

安装命令:npm install vue-router@4

1.添加两个页面vuedemosrcviewsindex.vue、vuedemosrcviewscontent.vue

2.添加vuedemosrcrouterindex.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'  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>

 

配置路径别名@

修改路径别名文件:vuedemovite.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")     }, ]

这里就是把..修改成@

 

路径提示设置

添加vuedemojsconfig.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>

 

嵌套路由结合共享组件

添加页面:

vuedemosrcviewsvip.vue

vuedemosrcviewsvipdefault.vue

vuedemosrcviewsvipinfo.vue

vuedemosrcviewsviporder.vue

vuedemosrcviewssvip.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/ (重定向)