vue3中的VueRouter基础

在网页中，经常需要发生页面更新或者跳转。这时候我们就可以使用Vue-Router来帮我们实现。Vue-Router是用来做路由的，也就是定义url规则与具体的View映射的关系。可以在一个单页面中实现数据的更新。

一、安装：

通过命令：npm install vue-router@4.3.0 –save ，或者在创建项目的时候，选择添加Vue-Router的支持。

二、基本使用：

1. 创建路由代码：Single Page Application：SPA

在src/router/index.js中，填入以下代码：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

以上代码解释如下：

1. 使用createRouter创建路由对象。
2. 路由工作模式，有两种工作模式：
   ○ history模式：路由中不包含#，更加美观，但是在后期部署后，如果前端项目代码和后端项目代码部署在同一个域名下，则容易产生路由混淆（前端路由和后端路由混淆在一起了）。以上代码用的是history模式，代码为：

       const router = createRouter({
           history:createWebHistory(), //history模式
       })
     ○ hash模式：路由中包含#，不太美观，对SEO优化不够友好。好处是兼容性更好，即使前端代码和后端代码部署在同一个域名下，也不会产生路由混淆。使用hash模式的代码为：
       ~~~bash
       const router = createRouter({
           history:createWebHashHistory(), //hash模式
       })
   3. routes是一个数组，里面是对象数据，每个对象中的属性作用分别如下：
     ○ path：该路由对应的path。
     ○ component：组件对象，既可以先导入，也可以指定组件的时候使用import语句来导入。
     ○ name：路由名称，后期在做路由反转的时候可以使用。
   ### 2. 使用路由
   然后在main.js文件中对router进行使用：
   ~~~bash
   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   
   const app = createApp(App)
   
   app.use(router)
   
   app.mount('#app')

   以上相关代码解释如下：
3. 从src/router/index.js中导入router对象。
4. 执行app.use(router)代码，即可使用此路由了。

3. 展示路由：

在App.vue中的代码如下：

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <div class="wrapper">
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

以上相关代码解释如下：

1. 在模板中，使用RouterLink定义路由链接，此组件有点类似html中的a标签，在点击后会跳转到to属性指定的路由上去。to除了直接写path外，还可以通过name来定义，比如：

   <RouterLink :to="{name: 'home'}">Home</RouterLink>

2. 使用RouterView标识路由出口，在进入路由A后，路由A所对应的组件会显示在RouterView的地方。

二、嵌套路由

在某个页面中，如果还需要通过路由更新局部模块，那么可以通过嵌套路由来实现，只要配置children就可以了。

1. src/router/index.js代码如下：

   const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes: [
       {
         path: '/',
         name: 'home',
         component: HomeView
       },{
         path: '/news',
         component: () => import('../views/news/NewsView.vue'),
         name: 'news',
         children: [{
           path: 'detail', 
           name: 'news-detail', 
           component: import('../views/news/NewsDetailView.vue')
         }]
       },
       {
         path: '/about',
         name: 'about',
         component: () => import('../views/AboutView.vue')
       }
     ]
   })

2. src/views/news/NewsView.vue代码如下：

   <template>
   <ul>
       <li><RouterLink :to="{name: 'news-detail'}">新闻1</RouterLink></li>
       <li>新闻2</li>
       <li>新闻3</li>
   </ul>
   <RouterView></RouterView>
   </template>

3. src/views/news/NewsDetailView.vue代码如下：

   <template>
   <h1>AIGC将迎来爆发式增长！</h1>
   </template>

三、路由传参

路由传参有两种方式，一种是在定义路由的时候指定参数，另一种是通过查询字符串的方式传参。

1. 路由指定参数

src/router/index.js代码如下：

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    path: '/news',
    component: () => import('../views/news/NewsView.vue'),
    name: 'news',
    children: [{
      path: 'detail/:pk',
      name: 'news-detail',
      component: import('../views/news/NewsDetailView.vue')
    }]
    }
  ]
})

在使用这个路由的时候，其代码如下：

<RouterLink :to="{name: 'news-detail', params: {pk: 1}}">新闻1</RouterLink>

以后在NewsDetailView.vue的onMounted生命周期函数中可以通过以下方式获取到参数：

<script setup name="NewsDetailView">
  import { onMounted } from 'vue';
  import { useRoute } from 'vue-router';

  const route = useRoute();

  onMounted(() => {
    const pk = route.params.pk;
    console.log(pk);
  })
</script>

2. 查询字符串传参

使用查询字符串传参，不需要预先在路由定义的时候指定参数，使用的时候直接传递即可，示例代码如下：/news/detail?pk=1&page=2
~~~bash
<RouterLink :to="{name: 'news', query: {page: 1}}">News</RouterLink>

以后在NewsView.vue组件中的onMounted生命周期函数中通过以下代码即可获取到：

<script setup name="NewsView">
  import { onMounted } from 'vue';
  import {useRoute} from "vue-router";

  const route = useRoute();

  onMounted(() => {
    console.log(route.query);
  })
</script>

四、编程式导航

之前我们学习了使用可以在用户点击的情况下进行页面更新。但有时候我们想要在js中手动的修改页面的跳转，这时候就需要使用编程式导航了。

1. router.push跳转：

想要导航到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的URL。当你点击<router-link>时，这个方法会在内部调用，所以说，点击<router-link :to=”…”>等同于调用router.push(…)。

声明式	程式
	router.push(…)

示例代码如下：

<script setup>
  import {useRouter} from "vue-router";

  const router = useRouter();

  // 字符串路径
  router.push('/users/eduardo')

  // 带有路径的对象
  router.push({ path: '/users/eduardo' })

  // 命名的路由，并加上参数，让路由建立 url
  router.push({ name: 'user', params: { username: 'eduardo' } })

  // 带查询参数，结果是 /register?plan=private
  router.push({ path: '/register', query: { plan: 'private' } })

  // 带 hash，结果是 /about#team
  router.push({ path: '/about', hash: '#team' })
</script>

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path ：

const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

2. router.replace替换

它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

声明式	程式
	router.push(…)

也可以直接在传递给 router.push 的 to 参数中增加一个属性 replace: true ：

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })