初始化
首先我们先对 vue3 项目进行初始化操作:
1.引入 vue-router 最新版
终端输入:
npm install vue-router
// 卸载vue-router
npm uninstall vue-router
// 安装低版本
npm i vue-router@4.0.1
2.创建两个页面用于路由跳转
- 在 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>
为什么会出现前端路由: 为了解决单页面网站,通过切换浏览器地址路径,来匹配相对应的页面组件这件事。