路由的跳转实现

demo/router-roue/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <nav>
+    <router-link to="/"><span>Home</span></router-link>
+    |
+    <!--  v-bind绑定path参数  -->
+    <router-link :to="{path:'/'}"><span>Home-path</span></router-link>
+    |
+    <!--  v-bind绑定name参数对应路由定义中的name  -->
+    <router-link :to="{name:'home'}"><span>Home-name</span></router-link>
+    |
+    <router-link to="/about"><span>About</span></router-link>
+    |
+    <!--  带query参数，url地址格式： http://localhost:8080/about?id=1  -->
+    <router-link :to="{path:'/about', query:{id:1}}"><span>About-query</span></router-link>
+    |
+    <!--  带params参数，url地址格式： http://localhost:8080/about/1/roger  -->
+    <router-link :to="{name:'about-params', params:{id:'1',name:'roger'}}"><span>About-params</span></router-link>
+    |
+    <router-link to="/header"><span>Header-组合API</span></router-link>
+    |
+    <router-link :to="{name:'test'}"><span>Test-选项API</span></router-link>
+  </nav>
+  <router-view/>
+</template>
+<script setup>
+import HeaderView from "@/views/HeaderView.vue";
+</script>

demo/router-roue/main.js

@@ -0,0 +1,5 @@
+import {createApp} from "vue";
+import App from "./App.vue"
+import router from './router'
+
+createApp(App).use(router).mount('#app')

demo/router-roue/router/index.js

@@ -0,0 +1,47 @@
+// 引入必要的router组件
+import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
+// 引入视图
+import HomeView from '../views/HomeView.vue'
+
+const Header = () => import('../views/HeaderView.vue')
+const Test = () => import('../views/TestView.vue')
+
+// 创建路由，包含path，name，component属性， component属性可以使用箭头函数直接引入视图
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        component: HomeView
+    },
+    {
+        path: '/about',
+        name: 'about',
+        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+    },
+    // 配合params参数的路由path改造
+    {
+        path: '/about/:id/:name',
+        name: 'about-params',
+        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+    },
+    {
+        path: '/header',
+        name: 'header',
+        component: Header,
+    },
+    {
+        path: '/test',
+        name: 'test',
+        component: Test,
+    }
+]
+
+// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
+// 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+// 导出路由
+export default router

demo/router-roue/views/AboutView.vue

@@ -0,0 +1,12 @@
+<template>
+  <h3>这是About</h3>
+</template>
+
+<script>
+export default {
+  updated() {
+    console.log(this.$route.query)
+    console.log(this.$route.params)
+  }
+}
+</script>

demo/router-roue/views/HeaderView.vue

@@ -0,0 +1,18 @@
+<template>
+  <h3>这是Header</h3>
+  <button @click="GoHome">GoHome</button>
+</template>
+
+<script setup>
+import {useRoute, useRouter} from "vue-router";
+
+const route = useRoute()
+const router = useRouter()
+
+function GoHome() {
+    router.push({
+      name: 'home',
+      query: {...route.query}
+    })
+  }
+</script>

demo/router-roue/views/HomeView.vue

@@ -0,0 +1,3 @@
+<template>
+  <h3>这是Home</h3>
+</template>

demo/router-roue/views/TestView.vue

@@ -0,0 +1,43 @@
+<template>
+  <h3>这事Test</h3>
+  <button @click="goAboutParams">GotoAbout</button>
+</template>
+
+<script>
+export default {
+  name: "TestView",
+  methods: {
+    // 字符串路径
+    goAbout: function () {
+      this.$router.push('/about')
+    },
+    //对象形式的path
+    goAboutPath: function () {
+      this.$router.push({path: '/about'})
+    },
+    // 带params的push请求
+    goAboutParams: function () {
+      this.$router.push({
+        name: 'about-params',
+        params: {
+          id: 1,
+          name: 'roger'
+        }
+      })
+    },
+    // 带参数的router.push
+    goAboutQuery: function () {
+      this.$router.push({
+        name: 'about',
+        // query: {...this.$route.query}  // 映射query
+        query: {id: 1}
+      })
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+
+</style>

src/App.vue

@@ -1,7 +1,27 @@
 <template>
   <nav>
-    <router-link to="/"><span>Home</span></router-link> |
+    <router-link to="/"><span>Home</span></router-link>
+    |
+    <!--  v-bind绑定path参数  -->
+    <router-link :to="{path:'/'}"><span>Home-path</span></router-link>
+    |
+    <!--  v-bind绑定name参数对应路由定义中的name  -->
+    <router-link :to="{name:'home'}"><span>Home-name</span></router-link>
+    |
     <router-link to="/about"><span>About</span></router-link>
+    |
+    <!--  带query参数，url地址格式： http://localhost:8080/about?id=1  -->
+    <router-link :to="{path:'/about', query:{id:1}}"><span>About-query</span></router-link>
+    |
+    <!--  带params参数，url地址格式： http://localhost:8080/about/1/roger  -->
+    <router-link :to="{name:'about-params', params:{id:'1',name:'roger'}}"><span>About-params</span></router-link>
+    |
+    <router-link to="/header"><span>Header-组合API</span></router-link>
+    |
+    <router-link :to="{name:'test'}"><span>Test-选项API</span></router-link>
   </nav>
   <router-view/>
 </template>
+<script setup>
+import HeaderView from "@/views/HeaderView.vue";
+</script>

src/router/index.js

@@ -1,27 +1,46 @@
 // 引入必要的router组件
-import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
 // 引入视图
 import HomeView from '../views/HomeView.vue'
 
+const Header = () => import('../views/HeaderView.vue')
+const Test = () => import('../views/TestView.vue')
+
 // 创建路由，包含path，name，component属性， component属性可以使用箭头函数直接引入视图
 const routes = [
-  {
+    {
-    path: '/',
+        path: '/',
-    name: 'home',
+        name: 'home',
-    component: HomeView
+        component: HomeView
-  },
+    },
-  {
+    {
-    path: '/about',
+        path: '/about',
-    name: 'about',
+        name: 'about',
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
+    },
+    // 配合params参数的路由path改造
+    {
+        path: '/about/:id/:name',
+        name: 'about-params',
+        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+    },
+    {
+        path: '/header',
+        name: 'header',
+        component: Header,
+    },
+    {
+        path: '/test',
+        name: 'test',
+        component: Test,
+    }
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
 // 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
 const router = createRouter({
-  history: createWebHistory(),
+    history: createWebHistory(),
-  routes
+    routes
 })
 
 // 导出路由

src/views/AboutView.vue

@@ -1,3 +1,12 @@
 <template>
   <h3>这是About</h3>
 </template>
+
+<script>
+export default {
+  updated() {
+    console.log(this.$route.query)
+    console.log(this.$route.params)
+  }
+}
+</script>

src/views/HeaderView.vue

@@ -0,0 +1,18 @@
+<template>
+  <h3>这是Header</h3>
+  <button @click="GoHome">GoHome</button>
+</template>
+
+<script setup>
+import {useRoute, useRouter} from "vue-router";
+
+const route = useRoute()
+const router = useRouter()
+
+function GoHome() {
+    router.push({
+      name: 'home',
+      query: {...route.query}
+    })
+  }
+</script>

src/views/TestView.vue

@@ -0,0 +1,43 @@
+<template>
+  <h3>这事Test</h3>
+  <button @click="goAboutParams">GotoAbout</button>
+</template>
+
+<script>
+export default {
+  name: "TestView",
+  methods: {
+    // 字符串路径
+    goAbout: function () {
+      this.$router.push('/about')
+    },
+    //对象形式的path
+    goAboutPath: function () {
+      this.$router.push({path: '/about'})
+    },
+    // 带params的push请求
+    goAboutParams: function () {
+      this.$router.push({
+        name: 'about-params',
+        params: {
+          id: 1,
+          name: 'roger'
+        }
+      })
+    },
+    // 带参数的router.push
+    goAboutQuery: function () {
+      this.$router.push({
+        name: 'about',
+        // query: {...this.$route.query}  // 映射query
+        query: {id: 1}
+      })
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+
+</style>