【vue学习笔记】五、路由

五、路由

1）什么是路由

路由(router)就是对应关系，在前端中路由就是Hash地址和页面的对应关系

在SPA（单页面程序）项目中，不同功能之间的切换要以来于前端路由来完成

2）前端路由的工作方式

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

3）实现简易的前端路由

使用动态组件+监听window.onhashchange事件

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.comNamee = 'About'
    break
}
}

4）vue-router

vue-router是vue官方给出的路由解决方案

1.vue-router安装与配置的步骤

1. 安装vue-router包

npm i vue-router

2. 创建路由模块

在src源代码目录下，新建router/index.js路由模块，并初始化如下代码

//1.导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'

//2.调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)

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

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

3. 导入并挂载路由模块

在main.js下进行挂载

//导入路由模块，得到router的实例对象
import router from '@/router/index.js'

new Vue({
    render: h => h(App),
    router //挂载路由
})

4. 声明路由链接和占位符

只要在项目中配置了vue-router就可以在App.vue里使用router-view这个组件了，它是一个占位符，代表要切换的区域

在router/index.js里的VueRouter构造函数里使用routers属性绑定hash地址与组件之间的对应关系

const router = new VueRouter(
	routes: [
    //每一个对应关系都叫做一个路由规则
    { path: '/home', component: Home},
    { path: '/about', component: About},
    { path:'/movie', component: Movie}
    ]
)

2.router-link替代a链接

在vue-router里可以使用router-link来代替<a>标签实现哈希地址的跳转

<router-link to"/home"></router>

5）vue-router的常见用法

1.路由重定向

路由重定向是指当用户访问A地址时，强制跳转到B地址，从而展示特定的组件页面（可以用来设置默认界面）

const router = new VueRouter(
	routes: [
    //每一个对应关系都叫做一个路由规则
    { path:'/', redirect: '/home'}
    { path: '/home', component: Home},
    { path: '/about', component: About},
    { path:'/movie', component: Movie}
    ]
)

2.嵌套路由

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

要实现嵌套路由，要通过children属性声明子路由规则

在src/router/index.js路由模块中，导入需要的组件，并使用children属性声明子路由规则：

注意子路由的路径不要加/

const router = new VueRouter(
	routes: [
    { path: '/home', 
    component: Home,
    children: [
    	{ path: 'tab1', component: Tab1 },
    	{ path: 'tab2', component: Tab2 },
    ]
    },
    ]
)

默认子路由的显示方式可以父路由里加一个redirect重定向，也可以把path值设置为空字符串，则这条路由规则叫做默认子路由

//重定向
const router = new VueRouter(
	routes: [
    { path: '/home', 
    component: Home,
	redirect: '/about/tab1',
    children: [
    	{ path: 'tab1', component: Tab1 },
    	{ path: 'tab2', component: Tab2 },
    ]
    },
    ]
)

//默认子路由
const router = new VueRouter(
	routes: [
    { path: '/home', 
    component: Home,
	redirect: '/about/tab1',
    children: [
    	{ path: '', component: Tab1 },
    	{ path: 'tab2', component: Tab2 },
    ]
    },
    ]
)

3.动态路由

动态路由是指将Hash地址中可变的部分定义为参数向，从而提高路由规则的复用性

在vue-router中使用英文的冒号:来定义路由的参数项

//动态路由
{ path: '/movie/:id', component: Moive }

//相当于将下面3个路由规则合并
{ path: '/movie/1', component: Moive },
{ path: '/movie/2', component: Moive },
{ path: '/movie/3', component: Moive },

在movie组件中，通过this.$route.params.id来拿到传递的id值

4.为路由规则开启props传参

在绑定路由时，设置props: true即可开启props传参

{ path: '/movie/:id', component: Moive , props: true} //此时在组件中可以通过props接收id

5.路由query和fullPath

在hash地址中?后面的参数项，叫做查询参数

在路由参数对象中，需要使用this.$route.query来访问查询参数

<router-link to"/moive/2?name=zs&age=20"></router-link>

this对象中的path属性只是路径部分，而fullPath是完整的地址

例如：

fullPath: /moive/2?name=zs&age=20

path: /moive/2

6.声明式导航 & 编程式盗汗

在浏览器中，点击链接实现导航的方式，叫做声明式导航，例如：

• 普通网页中点击<a>链接、vue项目中点击<router-link>都属于声明式导航

在浏览器中，调用API方法实现导航的方式，叫做编程式导航

• 普通网页中调用location.href跳转到新页面的方式，属于编程式导航

6.1 vue-router中的编程式导航API

vue-router中常用的编程式导航API:

• this.$router.push('hash地址')
  • 跳转到指定hash地址，并增加一条历史记录
• this.$router.replace('hash地址')
  • 跳转到指定hash地址，并替换掉当前的历史记录
• this.$router.go(数值n)
  • 代表在浏览历史中前进和后退（前进为正，后退为负）
  • 如果超过上限则原地不动
  • 可以使用this.$router.back()、this.$router.back()

编程式导航可以写在行内，但是一定不能带this否则会报错

7.导航守卫

导航守卫可以控制路由的访问权限

7.1全局前置守卫

每次发生路由导航跳转时们都会触发全局前置守卫

//创建路由实例对象
const router = new VueRouter({ ... })
                              
//调用路由实例对象的beforeEach方法，即可声明“全局前置守卫”
//每次发生路由导航跳转的时候，都会自动触发fn这个“回调函数”
router.beforeEach(fn)

7.2守卫方法的3个形参

全局前置守卫的回调函数中接收3个形参，格式为

//创建路由实例对象
const router = new VueRouter({ ... })
                              
//调用路由实例对象的beforeEach方法，即可声明“全局前置守卫”
//每次发生路由导航跳转的时候，都会自动触发fn这个“回调函数”
router.beforeEach((to, from, next) => {
    
})

• to是将要访问的路由的信息对象
• from是将要离开的路由的信息对象
• next是一个函数，调用next()表示放行，允许这次路由导航

7.3next函数的3种调用方式