Vue Router(x4.x)入门
Vue Router是Vue.js的官方路由。它与Vue.js核心深度集成，让用Vue.js构建单页面应用变得轻而易举。
功能包括：
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由vue.js的过渡系统提供的过渡效果
- 细致的导航控制
- 自动激活CSS类的链接
- HTML5 history模式或者hash模式
- 可定制的滚动行为
- URL的正确编码
第一章 入门
router路由，因为vue是单页面应用不会有那么多html让我们跳转，所以要使用路由作为页面的跳转，vue路由允许我们通过不同的URL访问不同的内容，通过Vue可以实现多视图的单页面Web应用。
构建前端项目
npm init vue@latest
//或者
npm init vite@latest
安装路由vue-router
// 目前默认版本是4.x版本
yarn add vue-router
或者 npm i vue-router@4
在src目录下新建router文件夹，然后在router文件夹下新建index.js
// 引入路由对象
import {
createRouter, createWebHashHistory } from 'vue-router'
// 1. 定义路由组件.
// 也可以从其他文件导入
import News from '../views/News.vue'
import Fun from '../views/Fun.vue'
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
{
path: '/news', component: News },
{
path: '/fun', component: Fun },
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
// 导出路由实例 去main.js入口文件 创建并挂载根实例
export default router
router-view
router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。
<template>
<div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
最后在main.js挂载
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.mount('#app')
第二章 命名路由和编程式导航
命名路由 ，除了path之外，还可以为任何路由提供name。这有以下几点优势：
●没有硬编码的 URL
●防止你在 url 中出现打字错误。
const routes = [ // 这里可以随意命名 routes1 也可以
{
path: '/news', name: '新闻', component: () => import('../views/News.vue') } // name可以是中文
]
router-link跳转的方式可以变更对象
<template>
<div>
<h1>只会番茄炒蛋</h1>
<div>
<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
<router-link :to="{ name: 'A' }">跳转a</router-link>
<router-link style="margin-left:200px" :to="{ name: 'B' }">跳转b</router-link>
</div>
</div>
</template>
编程式导航 (重点)
除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
- 字符串模式
methods: {
gotoNews() {
this.$router.push( '/news' )
}
},
- 对象模式
methods: {
gotoNews() {
this.$router.push({
path: '/news'
})
}
},
- 命名路由模式
methods: {
gotoNews() {
this.$router.push({
name: '新闻'
})
}
},
- a标签跳转
直接通过a href也可以跳转, 但是会刷新页面
<a href="/b">a标签跳转</a>
第三章 路由传参（重点）
query路由传参
编程式导航 使用router push 或者 replace 的时候 改为对象形式新增query属性
gotoPlaying() {
this.$router.push({
path: '/playing',
query: {
name: '路由传了个参数 111'
}
})
},
接受参数使用 useRoute 中的query
<template>
<div>我是playing</div>
<div>{
{
this.$route.query.name }} ········{
{
queryName }}</div>
</template>
<script>
export default {
data() {
return {
queryName: null
};
},
mounted() {
// 在生命周期里
this.queryName = this.$route.query.name // 使用路由传参 方法1 定义data数据
console.log(this.$route.query.name) // 使用路由传参 方法2 直接在{
{}}使用
console.log(this.$route) // 打印看看$route
console.log(this.$router)// 打印看看$router
},
methods: {
},
};
</script>
<style scoped>
</style>
动态路由传参
很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数
路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。
export default {
data() {
return {
};
},
mounted() {
console.log(this.$route.params) // 和query一样 可以直接往{
{}}里面插入 可以以赋值给data
},
methods: {
},
};
第四章 嵌套路由
一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构。
const routes = [ // 这里可以随意命名 routes1 也可以
{
path: '/news', name: '新闻', component: () => import('../views/News.vue') },
{
path: '/playing', component: Playing },
{
path: '/home', name: '玩', component: () => import('../views/Home.vue') },
{
path: '/dynamic/:id', component: () => import('../views/Dynamic.vue') },
{
path: '/user',
component: () => import('../views/User.vue'),
children: [
{
path: '/user/man', component: () => import('../views/Man.vue') },// path的第一种写法把路径带上父级的路径写全
{
path: 'woman', component: () => import('../views/Woman.vue') },// path的第二种写法不带斜杠/ 只写自己的路径
] // 配置完嵌套路由后 别忘了在父级组件里 加上 <router-view></router-view> 路由出口 否则不显示
},
]
如你所见，children 配置只是另一个路由数组，就像 routes 本身一样。因此，你可以根据自己的需要，不断地嵌套视图。
! 不要忘记在嵌套路由的页面增加router-view