10. Vue-router 路由
目录
一、什么是路由？
二、什么是前端路由？
三、前端路由的工作方式？
四、vue-router 的基本用法
1. 什么是 vue-router
2. vue-router 安装 和 配置步骤
2.1 安装 vue-router 包
2.2 创建路由模块
2.3 在main.js 文件中 导入并挂载路由模块
2.4 声明路由链接和占位符
2.5 在路由模块 index.js 写入以下代码
五、什么是路由重定向？
六、路由嵌套
1. 通过 children 属性声明子路由规则
2. 重定向子路由
3. 默认子路由
七、动态路由
八、拓展
一、什么是路由？
路由简单来说就是：对应关系
二、什么是前端路由？
前端路由：指的是就是Hash地址与组件之间的对应关系
三、前端路由的工作方式？
-
用户点击了页面上的路由链接
-
导致了URL地址栏中的Hash值发生了变化
-
前端路由监听到了Hash地址的变化
-
前端路由把当前Hash地址对应的组件渲染到浏览器中
四、vue-router 的基本用法
1. 什么是 vue-router
vue-router 是vue.js 官方 给出的 路由解决方案，只能结合vue项目进行使用，能够轻松的管理 SPA（单页面应用程序） 项目中组件的切换。
2. vue-router 安装 和 配置步骤
2.1 安装 vue-router 包
npm i [email protected] -S
2.2 创建路由模块
src源代码目录下，新建 router/index.js 路由模块，并初始化如下代码：
2.2.1 导入Vue 和 VueRouter 的 包
import Vue from 'vue'
import VueRouter from 'vue-router'
2.2.2 使用 Vue.use() 把vue-router安装为vue项目插件
Vue.use(VueRouter)
2.2.3 创建 VueRouter 的实例对象
const router = new VueRouter()
2.2.4 向外导出 router 实例对象
export default router
2.3 在main.js 文件中 导入并挂载路由模块
import router from '@/router/index.js'
new Vue({
render: h => h(App),
// 在vue项目中要想把路由用起来，必须要把路由实例对象，通过下面方式进行挂载
// router: 路由的实例对象
router
}).$mount('#app')
2.4 声明路由链接和占位符
2.4.1 当安装和配置了vue-router后，就可以使用 router-link 来替代 a 链接
首页
电影
关于
2.4.2 只要在项目中安装和配置了vue-router，就可以使用 router-view 这个组件了。它的作用很单纯，就是 占位符。最终展示的组件要在这里展示
2.5 在路由模块 index.js 写入以下代码
const router = new VueRouter({
// routes 是一个数组，作用：定义Hash地址 与 组件 之间的对应关系
routes: [
// 路由规则
{path: '/home', component: Home},
{path: '/movie', component: Movie},
{path: '/about', component: About}
]
})
五、什么是路由重定向？
路由重定向指的是：当用户访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便的设置路由的重定向
const router = new VueRouter({
// routes 是一个数组，作用：定义Hash地址 与 组件 之间的对应关系
routes: [
// 重定向路由规则
// 当用户访问 / 的时候，通过redirect 属性跳转到 /home 对应的路由规则
{path: '/', redirect: '/home'},
// 路由规则
{path: '/home', component: Home},
{path: '/movie', component: Movie},
{path: '/about', component: About}
]
})
六、路由嵌套
定义：通过路由实现组件的嵌套展示，叫做路由嵌套
1. 通过 children 属性声明子路由规则
在src/router/index.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则
const router = new VueRouter({
// routes 是一个数组，作用：定义Hash地址 与 组件 之间的对应关系
routes: [
// 重定向路由规则
// 当用户访问 / 的时候，通过redirect 属性跳转到 /home 对应的路由规则
{path: '/', redirect: '/home'},
// 路由规则
{path: '/home', component: Home},
{path: '/movie', component: Movie},
{path: '/about', component: About, children: [
// 声明子路由规则
{path: 'tab1', component: Tab1},
{path: 'tab2', component: Tab2}
]}
]
})
2. 重定向子路由
const router = new VueRouter({
// routes 是一个数组，作用：定义Hash地址 与 组件 之间的对应关系
routes: [
// 重定向路由规则
// 当用户访问 / 的时候，通过redirect 属性跳转到 /home 对应的路由规则
{path: '/', redirect: '/home'},
// 路由规则
{path: '/home', component: Home},
{path: '/movie', component: Movie},
{path: '/about', component: About, redirect: '/about/tab1', children: [
// 声明子路由规则
{path: 'tab1', component: Tab1},
{path: 'tab2', component: Tab2}
]}
]
})
3. 默认子路由
默认子路由，如果 children数组 中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”
这个时候就不需要重定向子路由了，代码修改如下：
About 组件：
tab1组件
tab组件
index.js 路由模块：
const router = new VueRouter({
// routes 是一个数组，作用：定义Hash地址 与 组件 之间的对应关系
routes: [
// 重定向路由规则
// 当用户访问 / 的时候，通过redirect 属性跳转到 /home 对应的路由规则
{path: '/', redirect: '/home'},
// 路由规则
{path: '/home', component: Home},
{path: '/movie', component: Movie},
{path: '/about', component: About, children: [
// 默认子路由，如果children数组中，某个路由规则的path值为空字符串，则这条路由规则叫做“默认子路由”，这个时候就不需要重定向了
// 声明子路由规则
{path: '', component: Tab1},
{path: 'tab2', component: Tab2}
]}
]
})
七、动态路由
动态路由指的是：把 Hash 地址中可变的部分 定义为 参数项，从而提高路由规则的复用性。
在vue-router 中，使用 英文的冒号 : 来定义路由的参数项。id就是动态参数项，并不一定是id，可以定义为其他的名字
雷神
钢铁侠
超人
const router = new VueRouter({
// routes 是一个数组，作用：定义Hash地址 与 组件 之间的对应关系
routes: [
// 需求：在Movie组件中，希望根据定义的参数项 mid的值，展示对应电影详情信息
{path: '/movie/:mid', component: Movie},
})
需求：在Movie组件中，希望根据定义的参数项 id的值，展示对应电影详情信息,可以通过两种方法：
方法1：
this.$route.params.mid 拿到这个值。可以省略this,直接写 $route.params.mid
Movie 组件 ---{{ this.$route.params.mid}}
方法2：
开启路由的 props 属性：
可以为路由规则开启 props 传参，从而方便的拿到动态参数的值
1、 index.js 路由模块里修改下列代码
const router = new VueRouter({
// routes 是一个数组，作用：定义Hash地址 与 组件 之间的对应关系
routes: [
// 需求：在Movie组件中，希望根据定义的参数项 mid的值，展示对应电影详情信息
{path: '/movie/:mid', component: Movie, props: true},
})
2、Movie 组件中，定义props属性
八、拓展
注意1：在Hash地址中 / 后面的参数项，叫做“路径参数” -->
在路由“参数对象”中，需要使用this.$route.params 来访问路径参数 -->
注意2：在Hash地址中 ? 后面的参数项，叫做“查询参数” -->
在路由“参数对象”中，需要使用 this.$route.query 来访问查询参数 -->
注意3：在 this.$route 中，path只是路径部分；fullPath 是完整的地址 -->
例如：fullPath: "/movie/1?name=zs&age=20" 完整的路径
path: "/movie/1" 路径部分