Vue前端路由

路由（英文：router）就是对应关系。

SPA与前端路由

SPA指的是单页面应用，所有组件的展示与切换都在这唯一的一个页面内完成。

此时，不同组件之间切换都需要通过前端路由来实现。

前端路由

前端路由是指Hash地址与组件之间的对应关系。

前端路由的工作方式

  1. 用户点击了页面上的路由链接。
  2. 导致了URL地址栏中的Hash值发生变化。
  3. 前端路由监听到了Hash地址的变化。
  4. 前端路由把当前Hash地址对应的组件渲染到浏览器中。

结论：前端路由，指的是Hash地址与组件之间的对应关系。

实现简易的前端路由

  1. 通过<component>标签，结合comName动态渲染组件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <template>
        <component :is="comName"></component>
    </template>

    <script>
    export default {
        name: 'App',
        data() {
            return {
                comName: 'Home'
            }
        }
    }
    </script>

  2. 在App.vue组件中，为<a>链接添加对应的hash值。

    1
    2
    3
    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>

  3. 在created生命周期函数中，监听浏览器地址栏中hash地址的变化，动态切换要展示的组件的名称。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    created() {
        // 只要当前的 App 组件一被创建，就立即监听 window 对象的 onhashchange 事件
        window.onhashchange = () => {
          console.log('监听到了 hash 地址的变化', location.hash)
          switch (location.hash) {
            case '#/home':
              this.comName = 'Home'
              break
            case '#/movie':
              this.comName = 'Movie'
              break
            case '#/about':
              this.comName = 'About'
              break
          }
        }
      }

Vue-Router

vue-router是Vue官方提供的路由解决方案。

安装和配置

在vue2项目中，安装vue-router的命令如下：

1
npm i vue-router@3.5.2 -S

创建路由模块

在src目录下，新建router/index.js文件。初始化如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
// 1.导入vue和vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2.Vue.use() 函数的作用，就是来安装插件的
Vue.use(VueRouter)

// 3.创建路由的实例对象
const router = new VueRouter()

// 4.向外共享路由的实例对象
export default router

导入并挂载路由模块

在 src/main.js 中，导入并挂载路由模块。

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue'
import App from './App2.vue'
// 导入路由模块，目的：拿到路由的实例对象
// 在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做 index.js 的文件
import router from '@/router'

new Vue({
  render: h => h(App),
  // 在 Vue 项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载
  // router: 路由的实例对象
  router: router
}).$mount('#app')

声明路由链接和占位符

在 /src/App.vue 组件中，使用vue-router提供的<router-link>、<router-view>声明路由链接和占位符。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div class="app-container">
    <h1>App2 组件</h1>

    <!-- 当安装和配置了 vue-router 后，就可以使用 router-link 来替代普通的 a 链接了 -->
    <!-- <a href="#/home">首页</a> -->
    <router-link to="/home">首页</router-link>
    <hr />

    <!-- 只要在项目中安装和配置了 vue-router，就可以使用 router-view 这个组件了 -->
    <!-- 它的作用很单纯：占位符 -->
    <router-view></router-view>
  </div>
</template>

声明路由匹配规则

1
2
3
4
5
6
7
8
9
10
11
12
13
// 1. 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

// 2. 创建路由的实例对象
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/movue', component: Movie },
    { path: '/about', component: About }
  ]
})

Vue-Router的常见用法

路由重定向

路由重定向是指：用户在访问地址A时，强制用户跳转到地址C，从而展示特定的组件。

通过路由规则的redirect属性，指定一个新的路由地址，可以很方便设置重定向：

1
2
3
4
5
6
7
8
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/movue', component: Movie },
    { path: '/about', component: About }
  ]
})

嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由。

vue嵌套

声明子路由链接和子路由占位符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div class="about-container">
    <h3>About 组件</h3>

    <!-- 子级路由链接 -->
    <router-link to="/about">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>

    <hr/>

    <!-- 子级路由占位符 -->
    <router-view></router-view>
  </div>
</template>

通过children属性声明子路由规则

1
2
3
4
5
6
7
8
9
10
11
12
13
const router = new VueRouter({
	{
      path: '/about',
      component: About,
      // redirect: '/about/tab1',
      children: [
        // 子路由规则
        // 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”
        { path: '', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    },
})

动态路由匹配

动态路由的概念：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。

在vue-router中使用（:）来定义动态路由的参数项。

可以使用this.$router.params.id对象来访问参数值。

1
2
3
4
5
6
7
8
9
10
11
<template>
	<div class="movie-comtainer">
        <h3> Movie组件 -- {{ this.$router.params.id }} </h3>
    </div>
</template>

<script>
    export default {
        name: 'Movie'
    }
</script>

使用props接收路由参数

为了简化路由获取形式，可以使用props进行接收参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
{ path: '/movie/:id', component: Movie, props:true }

<template>
	<div class="movie-comtainer">
        <h3> Movie组件 -- {{ id }} </h3>
    </div>
</template>

<script>
    export default {
        props: [ 'id' ]
    }
</script>