文章目录
一、什么是路由?
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。
相关名词:
- 路由:route 一组key-v的对应关系(路径的改变对应的组件进行切换)
- 路由器:router 多个路由需要路由器管理
- 为了实现单页面应用(SPA)
功能包括:
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由 Vue.js 的过渡系统提供的过渡效果
- 细致的导航控制
- 自动激活 CSS 类的链接
- HTML5 history 模式或 hash 模式
- 可定制的滚动行为
- URL 的正确编码
二、路由的安装与使用
1.安装
npm i vue-router@3 安装3版本
在src根目录创建router目录,在目录中创建index.js,代码如下:
import Vue from 'vue';
//导入vue-router
import VueRouter from 'vue-router'
//应用插件
Vue.use(VueRouter)
//创建router规则对象
const routes = [
]
//创建router
const router = new VueRouter({
routes
})
//导出router
export default router
2.main.js 中进行挂载
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import router from './router'
new Vue({
render: h => h(App),
router,
}).$mount('#app')
3.创建路由组件
在 src 根目录下创建文件夹 pages
说明:
- 路由组件 pages
- 一般组件 components
- 路由组件多了两个属性:$route $router
路由规则相关书写方法:
// 引入vue import Vue from 'vue'; // 导入 vue-router import VueRouter from 'vue-router'; // 导入组件 import About from '../pages/About'; import ContactUs from '../pages/ContactUs'; import Persons from '../pages/Persons'; import Show from '../pages/Show' // 应用插件 Vue.use(VueRouter); // 创建router规则对象 const routes =[ { path:'/about', component: About }, { path:'/contactus', component: ContactUs }, { path:'/persons/:id/:realname', component:Persons, children:[ { path:'show', component:Show } ] } ] // 创建router const router = new VueRouter({ routes, }) // 导出router export default router
使用路由
该标签是一个vue-router中已经内置的组件,他会被渲染成一个<a>标签。
<router-link to="/about" active-class="hover">关于我们</router-link>
该标签会根据当前的路径,动态渲染出不同的组件,也就是组件的一个占位符。
<router-view></router-view>
router-link属性:
- to: 用于指定跳转的路径。
- tag:tag可以指定<router-link>之后渲染成什么组件。
- replace:replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中。
- active-class:当<router-link>对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称。
mode属性
- hash模式:vue的路由默认是hash模式,地址栏后面会带一个#号。
- history模式:mode=”history”/
区别:
1:hash 兼容性好,history旧版本浏览器不兼容
2:hash 带的#不会发送给服务器,history会发送给服务器,程序部署上线时需要后端人员支持,解决404刷新问题。配置一下apache或是nginx的url重定向,重定向到你的首页路由上。
默认路径——也就是页面默认显示的内容
{
path: '/',
redirect: '/about'
},
三、路由的传参
1.params的类型
在路由规则中配置路由格式:/router/:id/:title(动态路由)
设置props为true,接收数据
地址栏显示样式 —— /xxx/xxx/1/张三
模板代码示例代码:
<router-link :to="`/message/show/${item.id}`">{{item.realname}}</router-link>
路由的props配置
- 第一种:props:{id:10,title:'ttt'}
- 第二种:props:true 该路由的params的参数,传递到该组件的props身上
- 第三种 值为函数(下方query参数在演示)
props($route){
return {id:$route.query.id,title:$route.query.title}
}
2.Query参数的类型
字符串形式:
<li v-for="item in res"> <router-link :to="`/about/news/show?id=${item.id}&title=${item.title}`">{{item.title}}</router-link> </li>
参数接收:
methods:{ id( ){ return $route.query.id; }, title( ){ reutrn $route.query.title; } }
3.路由name
作用——简化路由的跳转 ,路由较长的使用名称
上述query跳转 推荐如下写法:
<router-link :to="{name:'show', query:{id:item.id,title:item.realname}}">{{item.realname}} </router-link>
四、编程式路由
当不是a标签时候,需要js代码进行跳转,我们就采用编程式路由。两种方式:replace和push。
1:字符串形式
this.$router.push(`/message/show/${item.id}/${item.realname}`);
2:对象形式
this.$router.push({
name:'show',
params:{
id:item.id,
title:item.title
}
})
3:this.$router.back();//后退
this.$router.forward(); //前进
this.$router.go(); //参数可以为数字,指定跳转到指定的页面中
五、缓存路由组件
作用——让组件不销毁,保持活跃。
相关参数:
Include 如果不写 让所有组件保持活跃不销毁。
多个组件使用数组,:include=”[‘组件1’,’组件2’]”
<keep-alive include=”组件名称”> <router-view></router-view> </keep-alive>
路由的两个钩子函数:
//组件切换进来(组件显示状态)
activated() {
this.myinter = setInterval(()=>{
console.log(1)
},100);
},
//组件切换出去(后台显示)
deactivated() {
clearInterval(this.myinter);
}
六、路由守卫
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。
1.1 前置守卫
即对 整个单页应用(SPA) 中的所有路由都生效,初始化时执行、每次路由切换前执行。
代码:
//前置路由守卫
router.beforeEach((to,from,next)=>{
// console.log(to);
// console.log(from);
if(to.name=="news" || to.name=="dt"){
if(localStorage.getItem("token")=="zs"){
next();
}
}else{
next();
}
})
函数中的参数:
- to:进入到哪个路由去。
- from:从哪个路由离开。
- next:函数,决定是否展示你要看到的路由页面。
meta属性:
路由自定义信息:
用于标示路由是否需要判断守卫拦截,meta()(用于开发人员添加自定义信息)
2.2 后置守卫
全局后置守卫:初始化时执行、每次路由切换后执行
2.2.1 独享路由守卫
与全局路由守卫用法一致,但是只能针对一个路由使用。
2.2.2 组件内路由守卫
组件内守卫(组件内守卫是的两个方法是与生命周期函数平级的);
进入路由时调用,此时不能获取组件实例 this ,因为的当前守卫执行前,组件实例还没被创建。
//通过路由规则,进入组件时调用
beforeRouteEnter(to,from,next){
next(vm => {
// 通过 `vm` 访问组件实例
})
}
//通过路由规则,离开组件时调用
beforeRouteLeave(to,from,next){
}