Vue Router是Vue项目开发中，重要的一环，在页面模块的模块化，数据参数的传递，等方面具有重要的作用，Vue是单页面应用，通过路由控制页面所展示的内容，下面让我们一起学习一下关于Vue Route的基础用法，其中包含博主的整理总结。
一、什么是Vue Router
用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们
二、安装Vue Router
一般在Vue-cli创建项目时，会进行Router的安装
npm
npm install vue-router@4yarn
yarn add vue-router@4在main.js中引入Router，new Vue的时候将Router挂载到Vue的实例上，从而在项目开发的过程中，我们可以通过Vue.$route去触发Router的方法属性
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
代码解析（纯纯干货，哈哈哈）：首先，new的时候发生了什么，1.创建一个新对象2.将构造函数的作用域赋值给这个函数，因此this也指向了这个新对象3.执行构造函数的代码，为这个对象添加属性，4.返回这个对象
new Vue：也是基于Vue创建了一个新的Vue对象，并对用于传入的配置项和系统配置项进行合并，然后作用域赋值，然后给新对象添加属性，@方法，生命周期，监听事件，计算属性等，然后通过.$mount进行页面挂载，其中，render就是一个渲染函数，而createElement就是创建节点，App就是一般情况下Vue的html根文件，所以这里实质上就是将App这个html页面进行了渲染，当然在App页面中又有挂载的路由组件，进而可以渲染各种挂载的路由组件，
三、router-link与router-view
router-link：通过router-link而不使用常规的a标签，是因为通过router-link来创建连接，可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。
router-view：将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。
四、动态路由匹配
当通过Vue cli创建项目的时候，勾选了Vue router 之后会创建router文件夹
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = new VueRouter({
routes
})
export default router
下面将基于此文件进行相关属性的分析。
1.带参数的动态路由匹配
路径参数
{
path: '/:id',
name: 'home',
component: HomeView
},路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。
这将表示/后面的值，将会作为参数传递给home组件，而不作为路径进行页面的跳转。也就表示/a与/b跳转到的都是home组件，不同的是传递过来的值不同。
参数的获取：通过$route.params.id获取路由传递过来的值
<div>{{ $route.params.id }}</div>2.响应路由参数的变化
推荐通过路由守卫进行对应数据的处理
<template>
<div>{{ id }}</div>
</template>
<script>
export default {
data() {
return {
id: "",
};
},
created() {},
//路由守卫处理数据
beforeRouteEnter(to, from, next) {
next((vn) => {
vn.id = to.params.id;
});
},
};
</script>
<style>
</style>3.设置404页面
通过*匹配所有未知路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: "/404",
component: () => import("@/views/404"),
},
{ path: "*", redirect: "/404" }
]
const router = new VueRouter({
mode:"history",
routes
})
export default router
五、路由的匹配语法
可以通过正则对路由进行匹配。
通过?修饰符将一个参数标记为可选的
下列代码可以匹配到/about路由
path: '/about/:id?',下列代码无法匹配到/about路由
path: '/about/:id',六、编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。其中router-link是声明式导航，通过router的实例方法称为编程式导航。
1.导航到不同的位置
在Vue中可以直接访问$router实例，所以可以直接调用实例的方法，实现页面的跳转。想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。
当你点击router-link时，内部会调用push这个方法。
| 声明式 | 编程式 |
|---|---|
<router-link :to="..."> |
router.push(...) |
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：
// 字符串路径
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' })需要注意的是：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。
如果想要在提供path的方式上传递params，需要提供路由的 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 } }) // -> /user2.替换当前位置
它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。
| 声明式 | 编程式 |
|---|---|
<router-link :to="..." replace> |
router.replace(...) |
也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true ：
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })3.横跨历史，独断万古
可以通过.go()接收一个数字，指定前进后退几层。
为正数表示前进，负数表示后退。
4.路由命名
可以通过name属性指定路由名称，通过name属性进行传参以及跳转。
5.命名视图
可以通过多个router-view指定多个组件的展示，通过name标志显示那个组件。
<template>
<h1>Named Views</h1>
<ul>
<li>
<router-link to="/">First page</router-link>
</li>
<li>
<router-link to="/other">Second page</router-link>
</li>
</ul>
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
</template>
<script>
export default {
name: "App",
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
.router-link-active {
color: orange;
}
.router-link-exact-active {
color: crimson;
}
</style>
<style scoped>
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
li:not(:last-of-type) {
margin-right: 1rem;
}
</style>import { createRouter, createWebHistory } from 'vue-router'
import First from './views/First.vue'
import Second from './views/Second.vue'
import Third from './views/Third.vue'
export const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
// a single route can define multiple named components
// which will be rendered into <router-view>s with corresponding names.
components: {
default: First,
a: Second,
b: Third,
},
},
{
path: '/other',
components: {
default: Third,
a: Second,
b: First,
},
},
],
})
七、路由重定向与别名
通过redirect属性进行路由重定向
之前在进行404页面配置的时候，其实已经进行过路由的重定向了。
{
path: "/404",
component: () => import("@/views/404"),
},
{ path: "*", redirect: "/404" }通过alias进行路由的别名。
当我们访问别名时的路由时，实际上访问的仍是当前路由。
重定向是指当用户访问 /home 时，URL 会被 / 替换，然后匹配成 /。那么什么是别名呢？
将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /。文章来源：https://www.toymoban.com/news/detail-480250.html
上面对应的路由配置为：文章来源地址https://www.toymoban.com/news/detail-480250.html
const routes = [{ path: '/', component: Homepage, alias: '/home' }]到了这里，关于Vue Router的详细解读之手把手教学篇（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
