关于路由
在router.js中引入vue和vue-router
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
路由模式
前端路由就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果。angularjs中的ui-router,vue中的vue-router,以及react的react-router均是对这种功能的具体实现。
- hash模式：vue-router中默认使用的是hash模式，这样子浏览器的url上会出现#号：localhost:8080/#/
这种模式可以在window上监听这个事件：onhashchange,因为hash发生变化的url都会被浏览器记录下来，所以浏览器的前进后退键都可以是用，这时候浏览器是没有请求服务器的。
window.onhashchange = function(event){
console.log(event.oldUrl, event.newUrl);
}
- history模式：history模式是指使用HTML5的historyAPI实现客户端路由的模式，onhashchange只能改变#后买你的url，而history可以切换跟修改。
1.切换历史状态（go、back、forward）
history.go(-2);
history.back();
history.forward();
2.修改历史状态
history.pushState(data[,title][,url]);//向历史记录中追加一条记录
history.replaceState(data[,title][,url]);//替换当前页在历史记录中的信息。
history.state;//是一个属性，可以得到当前页的state信息。
window.onpopstate;//是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数
定义路由
- 3种路由方式
1、懒加载
var router = new Router({
mode: 'hash',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'login',
component: resolve => require(['./pages/login.vue'], resolve),
},
{
path: '/register',
name: 'register',
component: resolve => require(['./pages/register.vue'], resolve),
},
})
2、
routes: [
{
path:'/transfer/:id?',
name:'transfer',
component:()=>import('@/components/riches/transfer')，
meta:{requireAuth:true}
},
]
参数后面加?代表可传可不传的参数
3、普通方式
routes: [
{path: '/home ',name: 'home ',component: home ,meta: {title: 'home',requireAuth:true}},
{path: '/about ',name: 'about ',component: about ,meta: {title: '关于',requireAuth:true}},
]
- 嵌套路由
routes: [{
path: '/',
component: () => import( /* webpackChunkName: "home" */ './pages/home.vue'),
children: [{
path: "",
alias: "homepage",//别名
component: () => import( /* webpackChunkName: "home" */ './pages/homepage.vue'),
meta: {
group: "homepage",
title: "首页",
}
}]
}]
路由跳转
- router-link跳转
<router-link to="home">首页</router-link>
- this.$router.push()
// 路径
this.$router.push("/home");
// 路由名字
this.$router.push({
name: 'home',// 用params时只能用name引入
params:{
name:'id'
}
})
用params时读取参数：this.$router.params.id，在地址栏上看不到请求参数，页面刷新时有可能丢失请求数据
- this.$router.replace()
this.$router.replace({
name: 'home',// 用replace时可以用name或者path引入
query:{
name:'id'
}
})
用query时读取参数：this.$router.query.id，在地址栏可以看到请求参数
路由守卫
三个参数：to（将要去的路由）,from（出发的路由）,next（执行下一步）
- 全局守卫：
1、router.beforeEach((to,from,next)=>{})
2、router.afterEach((to,from)=>{})
// 比如写在main.js中
router.beforeEach((to,from,next)=>{
if(to.path == '/login' || to.path == '/register'){
next();
}else{
alert('请登录');
next('/login');
}
})
- 组件内守卫：
1、beforeRouteEnter:(to,from,next)=>{//不可以访问this}
2、beforeRouteUpdate:(to,from,next)=>{//可以访问this}
3、beforeRouteLeave:(to,from,next)=>{//可以访问this}
export default {
data(){
return{
name:"Arya"
}
},
beforeRouteEnter:(to,from,next)=>{
next(vm=>{
// 如果要访问this ,必须通过 next(vm=>{})访问,因为组件此时没有创建，所以没有this
alert(vm.name+',欢迎登录')
})
}
}
- 路由独享的守卫：beforeEnter:(to,from,next)=>{}
var router = new Router({
mode: 'hash',
base: process.env.BASE_URL,
routes: [
{
path: '/home',
name: 'home',
component: resolve => require(['./pages/home.vue'], resolve),
beforeEnter: (to, from, next) => {
let id = window.localStorage.getItem("id")
if (id) {
next()
} else {
next({ name: "login" })
}
},
}]
})
