Vue-Router4 学习记录

初始化

首先我们先对 vue3 项目进行初始化操作：
1.引入 vue-router 最新版

终端输入： 
npm install vue-router

// 卸载vue-router
npm uninstall vue-router 

// 安装低版本
npm i vue-router@4.0.1 

2.创建两个页面用于路由跳转

1. 在 src 目录下创建 views 文件夹，然后在 views 文件夹中创建两个页面，分别为 Home.vue 和 About.vue

页面代码如下：
// \src\views\Home.vue
<template> Home </template>

// \src\views\About.vue
<template> About </template>

3.在 src 目录下创建 router 文件夹，然后在里面添加 index.js 文件

import { createRouter, createWebHashHistory } from 'vue-router'
//引入组件
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const router = createRouter({
  //哈希模式
  history: createWebHashHistory(), 
  routes: [ 
  // 通过数组对象的形式，配置路径对应展示的组件。
    {
      path: '/',
      name: '/',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})
// 将 router 暴露出去  （export default 抛出方式）
export default router

4.在main.js 把 router 引入 Vue

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router from '../src/router'

// 生成 app 实例。
const app = createApp(App)
// 通过 use 引入 路由实例。
app.use(router)
// 将实例挂载到 #app 节点上。
app.mount('#app')

报错提醒： Uncaught TypeError: createApp(…).mount(…).use is not a function at main.js?t=1670145302257:6:30
createApp(App).mount(‘#app’).use(router) 为错误写法

5.修改 App.vue 代码：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

router-view   你可以把它放在任何地方，以适应你的布局。

配置完毕，在终端运行 npm run dev运行项目
http://127.0.0.1:5173/#/ --匹配Home页面
http://127.0.0.1:5173/#/about --匹配About页面

路由跳转

1.组件形式跳转

// App.vue
<template>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
</template>

2,方法形式跳转

// Home.vue

<template>
  <button @click="linkTo">About</button>
</template>
// setup 语法糖
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const linkTo = () => {
  router.push({
    path: "/about",
  });
};
</script>

路由传参

路由参数传递有两种形式，分别为使用params参数或query参数。
1.通过query参数

// Home.vue
方法一：

<template>
  <router-link :to="{ path: '/about', query: { name: 'home' } }">About</router-link>
</template>

方法二：
<template>
  <button @click="linkTo">Home</button>
</template>

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

const router = useRouter();
const linkTo = () => {
  router.push({
    path: "/about",
    query: {
      name: 'home',
    },
  });
};
</script>

// About.vue
<template>About</template>

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

const route = useRoute();
const query = route.query;
console.log(query);  // {name: 'home'}
</script>

Property “home” was accessed during render but is not defined on instance.
问题点：query: { name: home } 字符串必须用‘’包裹起来

2，通过params参数
使用这种形式传参之前，在package.json页面查看
"dependencies": { "vue": "^3.2.41", "vue-router": "^4.1.6" //确认vue-router版本 },
因为vue-router v4.1.4 移除了未定义的params传递，如果我们用 params: { name: 'home' }来传递参数，控制台提示：

[Vue Router warn]: Discarded invalid param(s) “name” when navigating.
See
https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22
for more details.
[Vue路由器警告]:丢弃无效的参数导航时输入“name”。详情请参见https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22。

正确使用方法：
(1).切换低版本

// 卸载vue-router
npm uninstall vue-router 
// 安装低版本
npm i vue-router@4.0.1 
本方法来源：http://www.jkjk.icu/#/note-info/80

//Home.vue
方法一：
<template>
  <router-link :to="{ name: 'about', params: {  name: 'home' } }">About</router-link>
</template>

方法二:
<template>
  <button @click="linkTo">Home</button>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const linkTo = () => {
  router.push({
    name: "about",
    params: {
      name: 'home',
    },
  });
};
</script>

// About.vue
<template>About</template>
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
const params = route.params;
console.log(params);
</script>

(2).在新版本中用其他方法传参

例如：
Pass the data as state to save it to the History API state:
将数据作为状态传递，将其保存到History API状态:

// Home.vue
<template>
  <router-link :to="{ name: 'about', state: { myData:1 } }">Home</router-link>
</template>

// About.vue
<template>About</template>
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
let currentState = history.state;
console.log(currentState.myData);
</script>

为什么会出现前端路由： 为了解决单页面网站，通过切换浏览器地址路径，来匹配相对应的页面组件这件事。