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>