目录前言：一、什么是VueRouter？二、路由的使用1、路由的安装2、路由的模式3、创建路由模块4、声明路由链接和占位符三、路由的重定向和别名四、嵌套路由五、声明式和编程式导航1、声明式导航2...
目录
前言：一、什么是 vue Router ？
二、路由的使用
1、路由的安装
2、路由的模式
3、创建路由模块
4、声明路由链接和占位符
三、路由的重定向和别名
四、嵌套路由
五、声明式和编程式导航
1、声明式导航
2、编程式导航
3、替换当前位置
4、路由历史
总结：
前言：
在编写vue里的SPA（Single Page Application单页面应用）时，我们始终绕不开路由的使用，vue-router4.0版里有一些重要更新，在这里分享给大家。
一、什么是 Vue Router ？
vue-router是vue.js官方给出的路由解决方案，能够轻松的管理SPA项目中组件的切换
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：
List item嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue.js 的过渡系统提供的过渡效果
细致的导航控制
自动激活 css 类的链接
html5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码
二、路由的使用
1、路由的安装
npm install vue-router@4
2、路由的模式
createWebHashHistory()：Hash模式createWebHistory()：history模式，推荐使用
3、创建路由模块
在项目中的src文件夹中创建一个router文件夹，在其中创建index.js模块采用createRouter()创建路由，并暴露出去
在main.js文件中初始化路由模块app.use(router)
// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import HomeView from '@/views/HomeView.vue'
// 创建路由规则
let routes = [
{
path: '/', // URL 地址
name: 'home', // 名称
component: HomeView // 渲染该组件
},
]
// 创建路由
const router = createRouter({
// 使用 history 模式
history: createWebHistory(),
// 路由规则
routes
})
// 将路由对象暴露出去
export default router
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由模块
let app = createApp(App)
app.use(router) // 初始化路由插件
app.mount('#app')
4、声明路由链接和占位符
< router-link>：路由链接，to属性则为点击此元素，需要切换的路由地址< router-view>：路由占位符，路由切换的视图展示的位置
<template>
<!-- 路由链接，点击是路由地址会切换到属性 to 的地方 -->
<router-link to="/">首页</router-link>
|
<router-link to="/blog">博客</router-link>
<hr>
<!-- 路由试图，路由切换组件的地方 -->
<router-view/>
</template>
三、路由的重定向和别名
在路由规则中，可采用redirect来重定向另一个地址
// 路径写法
const routes = [{ path: '/home', redirect: '/' }]
// 命名写法
const routes = [{ path: '/home', redirect: { name: 'home' } }]
]
别名表示访问url时自由命名，不受约束，router会自动进行别名匹配，就像我们设置/的别名为/home，相当于访问 /
// alias是别名的key
const routes = [{ path: '/', component: HomeView, alias: '/home' }]
四、嵌套路由
如果在路由视图中展示的组件中包含自己的路由占位符，则此处会用到嵌套路由
如图所示：点击关于链接，则会显示About组件，在其组件中又包含了路由链接和路由占位符
嵌套路由规则
在某一个路由规则中采用children来声明嵌套路由的规则嵌套路由规则中的path不能以/开头，访问需使用/father/son的形式
// router/index.js
{
path: '/father',
name: 'father',
component: () => import('@/views/father.vue'),
// 嵌套路由
children: [
{
path: 'son', // path 前面不要加 /
name: 'son',
component: () => import('@/views/son.vue')
},
]
}
// father.vue 页面
<template>
<div class="school">
我是 father 页面：
<router-link to="/father/son">子页面</router-link>
<hr>
<!-- 该组件中自己的路由视图 -->
<router-view />
</div>
</template>
五、声明式和编程式导航
1、声明式导航
很多时候，我们需要将给定匹配模式的路由映射到同一个组件，例如：想渲染不同博客的内容，其>实只是渲染到同一个组件上，只是博客的编号不同而已在Vue Router中，可以在路径中使用一个动态itXKwWsIIM字段来实现，我们称之为“路径参数” ，语法如：path: ‘/url/:param’在展示的组件中访问路径参数
3.1. 在选项式 APIJS中采用this. r o u t e . p a r a m s 来访问，试图模板上采用 route.params来访问，试图模板上采用 route.params来访问，试图模板上采用route.params来访问
3.2. 在组合式 API 中，需要import { useRoute } from ‘vue-router’，JS和视图模板上通过useRoute().params来访问
3.3. 还可以通过在路由规则上添加props: true，将路由参数传递给组件的props中
// router/index.js
{
path: '/father',
name: 'father',
component: () => import('@/views/father.vue'),
// 嵌套路由
children: [
{
path: 'son/:id', // path 前面不要加 / （路径传参）
name: 'son',
component: () => import('@/views/son.vue'),
props: true // 将路径参数传递到展示组件的 props 中
},
]
}
// father.vue
<template>
<div class="school">
我是 father 页面：
<router-link to="/father/son">子页面</router-link>
<hr>
<!-- 该组件中自己的路由视图 -->
<router-view />
</div>
</template>
// son.vue 选项式
<script>
export default {
// 通过 props 来接收路径参数
props: { id: String },
methods: {
showRouteParams() {
// 通过 `this.$route.params` 获取路径参数
console.log(this.$route.params)
// 取出指定的路径参数
console.log(this.$route.params.id)
// 输出 props 中得到的路径参数
console.log("输出 props 中得到的路径参数：" + this.id)
}
}
}
</script>
<template>
<div class="math">
我是 BlogContent 页面
<ul>
<li>通过 `this.$route.params` 获取路径参数 -- {{ $route.params }}</li>
<li>取出指定的路径参数 -- {{ $route.params.id }}</li>
<li>输出 props 中得到的路径参数 id -- {{ id }}</li>
</ul>
<button @click="showRouteParams">在 JS 中访问路径参数</button>
</div>
</template>
// son.vue 组合式
<script setup>
import { useRoute } from 'vue-router'
// 通过 props 来接收路径参数
let propsData = defineProps({ id: String })
// 获取路由跳转对象
let route = useRoute()
function showRouteParams() {
console.log(route.params) // 通过 `route` 获取路径参数
console.log(route.params.id) // 取出指定的路径参数
console.log("输出 props 中得到的路径参数：" + propsData.id)
}
</script>
<template>
<div class="math">
我是 BlogContent 页面
<ul>
<li>通过 `route` 获取路径参数 -- {{ route.params }}</li>
<li>取出指定的路径参数：{{ route.params.id }}</li>
<li>输出 props 中得到的路径参数 id -- {{ id }}</li>
</ul>
<button @click="showRouteParams">在 JS 中访问路径参数</button>
</div>
</template>
2、编程式导航
提示：编程式的router.push(…)的语法
其的参数可以是一个字符串路径，或者一个描述地址的对象如果参数是描述地址的对象的话，其对象中path和params不能同时使用
// 编程式导航
const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益（params名必须和 router规则中的名一致）
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user
3、替换当前位置
提示：也可以直接在传递给router.push的routeLocation中增加一个属性replace: true
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
4、路由历史
router.go(n) 该方法采用一个整数作为参http://www.cppcns.com数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)
// 向前移动一条记录，与 router.forward() 相同 router.go(1) // 返回一条记录，与 router.back() 相同 router.go(-1) // 前进 3 条记录 router.go(3) // 如果没有那么多记录，静默失败 router.go(-100) router.go(100)
总结：
到此这篇关于Vue3 中路由Vue Router 的使用的文章就介绍到这了,更多相关Vue3 路由Vue Router使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
