Vue Router的详细解读之手把手教学篇（一）

        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@4

yarn​

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 } }) // -> /user

2.替换当前位置

它的作用类似于 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，但会被匹配为用户正在访问 /。

上面对应的路由配置为：

const routes = [{ path: '/', component: Homepage, alias: '/home' }]