vue-路由相关

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘./views/Home.vue‘
import Custom from ‘./views/Custom‘
import System from ‘./views/System‘

import CustomList from ‘./views/custom/CustomList‘
import CustomHandle from ‘./views/custom/CustomHandle‘

Vue.use(Router)

export default new Router({
mode:‘hash‘,

// 配置一级路由
routes: [
{
path: ‘/‘,
redirect: ‘/home‘,
},
{
path: ‘/home‘,
name: ‘home‘,
component: Home
},
{
path: ‘/custom‘,
name: ‘custom‘,
component: Custom,
// 配置某一个 一级路由下面的二级路由
children:[
{
path:‘/custom/list‘,
name:‘customList‘,
component: CustomList
},
{
// 简写
path:‘handle‘,
name:‘customHandle‘,
component: CustomHandle
}
]
},
{
path: ‘/system‘,
name: ‘system‘,
component: System
}
// {
// path: ‘/about‘,
// name: ‘about‘,
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ ‘./views/About.vue‘)
// }
]
})

router-link 细节点
<router-link :to="{path:‘/custom/list‘,query:{lx:‘my‘}}" slot="title"> </router-link>
<router-link to=‘/custom/list‘ slot="title"> </router-link>

<router-link to=‘/custom/list?lx=my‘ slot="title"> </router-link>
<router-link :to="{path:‘/custom/list‘,query:{lx:‘my‘}}" slot="title"> </router-link>

--------------

/**
* this.$router
* go(n): 回退或者前进N步
* back() => go(-1)
* forward() =>go(1)
* push(): 跳转到指定的路由 实现路由切换
*
* => 编程式导航
*/

------------------

命名路由(给每一个路由设置一个名字,后期可以基于名字实现跳转)
在路由配置表中给 每一个路由规则设置 name

<router-link :to="{name:‘customList‘}" slot="title"> 我的客户 </router-link>
<router-link :to="{path:‘/custom/list‘,query:{lx:‘all‘}}" slot="title">全部客户</router-link>
<router-link :to="{name:‘customList‘,query:{lx:‘all‘}}" slot="title">全部客户</router-link>

query 和 params 的区别

1 query 问号传递的信息会在地址栏中 体现出来
+ 比较丑
+ 基于router-link 或者 this.$router.push 跳转的时候， 传递的参数可以在渲染组件中获取到
+ 在 当前地址下刷新 依然可以获取到参数
2 params 不会再地址栏中显示
+ 相对美观
+ 基于router-link 或者 this.$router.push 跳转的时候， 传递的参数可以在渲染组件中获取到
+ 在 当前地址下刷新 获取不到参数 params中的信息会被清空

动态路由

{
path:‘/custom/list/:lx‘, // 动态路由
name:‘customList‘,
component: CustomList
},
跳转
<router-link to="/custom/list/my" slot="title"> 我的客户 </router-link>
获取 (当前地址下刷新 依然可以获取到参数)

this.$router = $router.currentRoute
this.$router.currentRoute.params = {lx:‘my‘}

路由匹配失败 跳转到首页
,
{
path:‘*‘,
redirect:‘/‘
}

// 全局守卫 (不管路由匹配哪一个地址， 渲染了哪一个组件， 都会触发)
router.beforeEach((to,from,next)=>{
// to: 将要跳转的路由对象(query/params...)
// from: 从哪个路由来 存储的也是这个路由对象
console.log(‘全局beforeEach‘,to,from)

// 进入下一个 钩子函数
next();
})

router.beforeResolve((to,from,next)=>{
console.log(‘全局 before Resolve‘)
// 进入下一个 钩子函数
next();
})

router.afterEach((to,from)=>{
console.log(‘全局 after Each‘)
})

// 路由独有守卫
{
path: ‘/home‘,
name: ‘home‘,
component: Home,
// 路由独有守卫
beforeEnter(to,rom,next){
console.log(‘路由独有守卫 beforeEnter‘)
next();
}
},

// 组件独有守卫
beforeRouteEnter(to,from,next){
// 进入组件之前
console.log(‘组件独有守卫 before Route Enter‘)
next();
},
beforeRouteUpdate(to,from,next){
// 进入更新之前
console.log(‘组件独有守卫 before Route Update‘)
next();
},

beforeRouteLeave(to,from,next){
// 进入离开之前
console.log(‘ 组件独有守卫 before Route Leave‘)
next();
}

vue-路由相关

原文：https://www.cnblogs.com/eric-share/p/14601078.html