每天一点点之vue框架开发 - vue-router路由进阶（路由别名、跳转、默认路由、二级路由、路由守卫）

路由别名

 

在main.js中的路由中添加name来创建别名

const routes = [
    {path:'/footer',name:footerLink,component:Footer}
]

 

在组件中的路由中通过对象属性来实现路由

<router-link :to="{name:homeLink}">Mirror微申</router-link>

 

跳转

 

1.跳转到上一次浏览的页面

this.$router.go(-1)

 

2.跳转到指定路由

this.$router.replace(‘/footer’)
// 还可以通过别名跳转
this.$router.replace({name:’footerLink’})

 

也可以通过push进行

this.$router.push(‘/footer’)
this.$router.push({name:’footerLink’})

 

 

设置默认路由

 

const routes = [
    {path:'/',redirect:'/home'},
    {path:'/home',name:homeLink,component:Home},
]

或者在路由中添加

const routes = [
    {path:'*',redirect:'/'},
]

这样写有两个好处，一个是设置了默认访问路由，还有一个就是当用户在地址栏输入错误的时候跳转到首页

 

二级路由

 

 

 

剥离路由，单独写在一个文件中

 

1.将路由提取到一个文件中，我把它放在了main.js 同目录到 ./assets/js/routes.js

import Home from '../../components/home/Home';
import Footer from "../../components/footer/Footer";

export const routes = [
    { path: '/', name: 'homeLink', component: Home },
    { path: '/footer', name: 'footerLink', component: Footer },
    { path: '*', redirect: '/' },
]

说明，使用 export 将数组暴露出去，import引入组件

 

2.在main.js 中引入路由文件

import { routes } from './assets/js/routes.js'

 

 

路由守卫

1.全局守卫 

// 全局守卫
router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert("你还没有登录，请先登陆");
    next('/login');
  }
})

参数说明：

　　to：去那

　　from：到哪里

　　next：跳转到哪里，回调函数

 

2.后置钩子

在路由之后出发，其实和全局守卫差不多

router.afterEach((to,from) => {
  alert("后置钩子");
})

 

 3.独享守卫

就是在路由中添加 beforeEnter ，访问其他链接的时候，不会提示，只有在访问特定路由的时候才会触发

{ path: '/blogging', name: 'bloggingLink', component: Blogging ,beforeEnter: (to, from, next) => {
    if(to.path == '/login' || to.path == '/register'){
      next();
    }else{
      alert("你还没有登录，请先登陆");
      next('/login');
    }
  }}, 

 

 4.组件内守卫

就是在组件内进行守卫，不能和路由守卫同用

export default {
    data(){
        return {
            name:'Victor'
        }
    },
    // 组件进入
    beforeRouteEnter (to, from, next) {
        next(vm => {
            alert('Hello ' + this.name)
        })
    },
    // 组件离开
    beforeRouteLeave (to, from, next) {
        if(confirm('确认离开吗？') == true) {
            next();
        }else{
            next(false);
        }
    }
}

说明：在 beforeRouteEnter 中如果想访问data，需要在回调中访问