vue路由的介绍和使用(包括前端导航、导航守卫)

路由基本使用

什么是路由??
就是对应关系(例如拨打10086会有不同的按键对应不同的服务,这种按键与服务对应的关系就是路由)
通俗易懂的概念: Hash地址与组件之间的对应关系。
前端路由工作方式
1.用户点击了页面上的路由链接
2.导致了URL地址栏中的Hash值发生了变化
3.前端路由监听了到Hash地址的变化
4.前端路由把当前Hash地址对应的组件渲染都浏览器中

实现简易的前端路由

根组件创建对应路由的a标签,再使用component进行组件占位,通过is指定要显示的组件

可以发现此时组件绑定死了,因此应该动态绑定components的is属性值指向的组件,动态绑定

onhashchange事件监听组件的hash值的改变,当hash值被改变就会触发这个事件,通过location.hash可以获取当前的hash值,data里面定义的是默认的指向的组件

上面写完,然后点击不同的链接,component就显示不同的组件内容,这就是一个简单的前端路由
在实际开发中,路由不会这么简易,但也不需要自己写,下面就开始学习第三方库vue-router的使用了

安装和配置vue-router路由

什么是vue-router???
vue-router是vue.js官方给出的路由解决方案。它只能结合vue项目进行使用，能够轻松的管理SPA项目中组件的切换。
vue-router的官方文档地址: https://router.vuejs.org/zh/

安装vue-router包

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

npm i vue-router@3.5.2 -S

创建路由模块

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

在index.js里面添加如下代码进行配置

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

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

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

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

导入并挂载路由模块

上面配置完后,需要让路由的js模块与main.js模块关联,因此需要到main.js里面配置如下代码:

//1.导入路由模块
//import routerjs from '@/router/index.js'
//import routerjs from '@/router/'
import routerjs from '@/router'
//以上三种方式均可以引入/router/index.js
//在模块化导入时,如果给定的不是具体的文件,而是文件夹,则默认导入这个文件夹下名为index.js的文件,文件名不是index.js是需要指定完整路径

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

声明路由链接和占位符

先在父组件声明路由的连接和占位符

<template>
  <div class="app-container">
    <h1>App2 组件</h1>
    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />
    <!-- 只要在项目中安装和配置了vue-router，就可以使用router-view这个组件了 -->
    <!-- 它的作用很单纯:占位符,和之前的component组件一样的作用 -->
    <router-view></router-view>
  </div>
</template>

点击上面每个链接,显示对应的组件

上面指明了路由链接和router-view后,需要在router/index.js,里面去配置对应的路由

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

//导入需要的路由组件模块
import home from '@/components/Home.vue'
import movie from '@/components/Movie.vue'
import about from '@/components/About.vue'

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

//3.创建路由的实例对象
//在路由实例上配置对应的路由模块
const router = new VueRouter({
    //routes是一个数组,作用:定义'hash地址'与'组件'之间的对应关系
    routes:[
        //在前面我们配置的路由带'#',但是在这里指定路由时不需要,带上'#'反而报错了
        {path:'/home',component:home},
        {path:'/movie',component:movie},
        {path:'/about',component:about}
    ]
})

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

最后,效果实现了:

此时已经可以点击每个链接进行组件的切换了

使用router-link替代a连接

 <!-- 只要在项目中安装和配置了vue-router，就可以使用router-link来替代普通的a链接了 -->
    <!-- 里面有个to属性和a标签的herf属性一致,有个优点就是不需要再写'#'了,直接写hash值就可以,例如下面 -->
    <router-link to="/home">首页</router-link>
    <a href="#/home">首页</a>
   上面两种都是可以绑定指定路由的,但更推荐使用router-link
   router-link本质就是a链接,可以查看控制台源代码
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>

redirect重定向

作用,路由是点击某个链接跳转的地址,当直接访问页面时候,由于没有点击操作,则页面无元素,使用重定向使页面访问时直接跳转到我们想要的页面

路由重定向指的是:用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向:

只需要在路由的配置文件index.js里面的routes里面加一行代码,代码如下:

    //routes是一个数组,作用:定义'hash地址'与'组件'之间的对应关系
    routes:[
        //path代表'/'路由地址,当访问这个地址时会重定向到'/home'路由地址
        {path:'/',redirect:"/home"},
    ]
})

嵌套路由

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

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


在About.vue文件中设置好路由关系,这个文件相对于App.vue来说是父子关系,因此这个路由也是App.vue的子级路由,template代码如下,父级的模板代码参考上面的()即可

<template>
  <div class="about-container">
    <h3>About 组件</h3>
    <!-- 子级路由链接,前面都要有共同的路由,后面各写各的 -->
    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>
    <hr>
    <!-- 子级路由占位符 -->
    <router-view></router-view>
  </div>
</template>

声明嵌套路由的规则

通过children属性声明子路由规则
在 src/router/index.js路由模块中，导入需要的组件，并使用children属性声明子路由规则:
在index.js里面的代码配置如下

//导入子路由组件模块
import tab1 from '@/components/tabs/Tab1.vue'
import tab2 from '@/components/tabs/Tab2.vue'
//在路由实例上配置对应的路由模块
const router = new VueRouter({
    //routes是一个数组,作用:定义'hash地址'与'组件'之间的对应关系
    routes:[
    //相当于给了第三个参数children,里面存放子级路由,最前面的path为共同的路由名,后面为自己的路由,子路由的path里面不用写'/'
		{
			path:'/about',
			component:about,
			children:[
				{path:'tab1',component:tab1},
				{path:'tab2',component:tab2}
		]}
  	]
})

配置完以后子级路由就能正常去切换了

设置默认显示的子路由方法(还是重定向,加个单词即可)
在index.js里面的代码配置如下

//导入子路由组件模块
import tab1 from '@/components/tabs/Tab1.vue'
import tab2 from '@/components/tabs/Tab2.vue'
//在路由实例上配置对应的路由模块
const router = new VueRouter({
    //routes是一个数组,作用:定义'hash地址'与'组件'之间的对应关系
    routes:[
    //相当于给了第三个参数children,里面存放子级路由,最前面的path为共同的路由名,后面为自己的路由,子路由的path里面不用写'/'
		{
			path:'/about',
			component:about,
			//redirect:'/about/tab1'//默认显示的子路由的第一种方法
			children:[
			//默认子路由:如果children数组中，某个路由规则的 path值为空字符串，则这条路由规则，叫做“默认子路由”
			
				//默认显示的子路由的第二种方法
				{path:'',component:tab1},
				{path:'tab1',component:tab1},
				{path:'tab2',component:tab2}
		]}
  	]
})

动态路由

动态路由匹配(基本用法)

缺点:路由规则的复用性差。
动态路由指的是:把 Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。
在vue-router中使用英文的冒号(:）来定义路由的参数项。示例代码如下:

//路由中的动态参数以︰进行声明，冒号后面的是动态参数的名称
{path:'/movie/:id',component:Movie}

//将以下3个路由规则，合并成了一个，提高了路由规则的复用性
{path:'/movie/1',component:Movie}
{path:'/movie/2',component:Movie}
{path:'/movie/3',component:Movie}

路由链接代码为

    <router-link to="/movie/1">洛基</router-link>
    <router-link to="/movie/2">雷神</router-link>
    <router-link to="/movie/3">复联</router-link>

效果图

点击谁显示谁的路由地址

需求:在Movie 组件中，希望根据id的值，展示对应电影的详情信息

第一种方式

在Movie.vue组件中打印一下this

点击展开route(不带r的,最短的这个)
展开结果如图:

this $route是路由的“参数对象”
this. $router 是路由的“导航对象”

这个params里面的对象就是我们的路由携带的动态参数,获取的话通过 ----this.$route.params.动态参数----来获取(其中最前面的this.可加可不加,不加的话也没影响)

第二种方式

为路由规则开启props传参
在router/index.js里面配置如下(完整的往上翻,这里就简单写最重要的一行)

//props:true代表为当前路由规则开启props传参,从而很方便地拿到动态参数的值
//没有动态参数的不建议加props,因为无意义,没什么用
{path:'/movie/:id',component:Movie,props:true}//id为动态参数

在movie.vue的导出里面定义props自定义属性,代码如下:

<script>
	export default {
		props:['id']//这个id值为路由的动态参数,需要和路由的动态参数保持一致
	}
</script>

此时已经拿到数据了,可以使用了,查看方式如下:

<template>
	<div>
		{{ id }}//此时就可以展示我们动态绑定的参数值
	</div>
</template>

拓展query和fullPath

注意:在 hash地址中,/后面的参数项，叫做“路径参数"
在路由“参数对象”中，需要使用this. $route. params来访问路径参数
注意2:在 hash地址中,'?'后面的参数项,叫做“查询参数”

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

注意3:在 this.$route中,path只是路径部分;fullPath是完整的地址

    <router-link to="/movie/1">洛基</router-link>
    <router-link to="/movie/2?username=zs&age=20">雷神</router-link>
    <router-link to="/movie/3">复联</router-link>

打印this结果如下

声明式导航和编程式导航

在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如:
普通网页中点击< a >链接、vue项目中点击< router-link >都属于声明式导航

在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如:普通网页中调用location.href 跳转到新页面的方式，属于编程式导航

vue-router 中的编程式导航API

vue-router提供了许多编程式导航的API，其中最常用的导航API分别是:

this.$router.push(‘hash地址’)
跳转到指定hash地址，并增加一条历史记录

	methods:{
		dianjitiaozhuan(){
			this.$router.push('/movie/1')//按钮绑定这个方法,当点击按钮就跳转到/movie/1这个(名为洛基的)路由组件了
			//这种跳转方式会存在历史记录,可以通过浏览器左上角的前进后退按钮回到任意页面
		}
	}

this.$router.replace(‘hash 地址’)
跳转到指定hash地址，并替换当前的历史记录(简单来说就是没有历史记录)

	methods:{
		dianjitiaozhuan(){
			this.$router.replace('/movie/1')//按钮绑定这个方法,当点击按钮就跳转到/movie/1这个(名为洛基的)路由组件了
			//这种跳转方式不会存在历史记录
		}
	}

this.$router.go(数值n)
在浏览历史中可以前进和后退

	methods:{
		dianjitiaozhuan(){
			//this.$router.go(-1)//历史记录后退一位
			//this.$router.go(-2)//历史记录后退两位
			//如果后退的层数超过上限，则原地不动
			//this.$router.go(1)//历史记录前进一位
			//this.$router.go(2)//历史记录前进两位
		}
	}

在实际开发中，一般只会前进和后退一层页面。因此vue-router提供了如下两个便捷方法:

$router.back()
	在历史记录中，后退到上一个页面
$router.forward()
	在历史记录中，前进到下一个页面

//下面方法切记不要加this.,不然报错
<button @click="$router.back()">back后退</button>
<button eclick="$router.forward()">forward 前进</button>

导航守卫

导航守卫可以控制路由的访问权限。示意图如下:

全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制:

在rooter/index.js下进行配置,如下:

//下面代码必须在router的new的实例对象下面配置,否则不生效

const router = new VueRouter({//router的实例对象
})
//在router实例对象下面进行如下配置
//调用路由实例对象的beforeEach方法，即可声明“全局前置守卫”
//每次发生路由导航跳转的时候，都会自动触发fn这个“回调函数”
router.beforeEach((to,from,next)=>{
	//全局前置守卫的回调函数中接收3个形参
	//to:是将要访问路由的信息对象
	//from 是将要离开路由的信息对象
	//next 是一个函数,调用 next()表示放行,允许这次路由导航
})

next函数的3种调用方式

当前用户拥有后台主页的访问权限，直接放行: next()
当前用户没有后台主页的访问权限，强制其跳转到登录页面: next(‘/login’)
当前用户没有后台主页的访问权限，不允许跳转到后台主页:next(false)

控制后台主页的访问权限