路由的用法:
// router.config.js
const routerConfig = [
{
path: '/login',
component: resolve => require(['登录路径.vue'],resolve),
meta: {noCheckSession: true}
},
{
path: '/',
component: resolve => require(['通用的主框架.vue'],resolve),
children: [
{
path: '/team',
name: 'team',
component: resolve => require(['对应的路径.vue'],resolve)
} ,
{
//其他类似
}
]
}
]
// main.js
import VueRouter from 'vue-router'
import ConfigRoute from './router.config'
Vue.use(VueRouter);
const router = {
mode: 'history',
base: __dirname ,
routes: ConfigRoute,
scrollBehavior(to,from,savedPosition){
if(savedPosition){
return savedPosition;
}else{
return {x: 0,y: 0}
}
}
}
router.beforeEach((to, from, next) => {
if(to.matched.some(record => !record.meta.noCheckSession)) {
// 这个路由需要auth,检验是否登录了.
let isLogin = auth.checkAuth()
// console.log('need login', isLogin);
if(!isLogin){
// 没有登录,重定向到登录页面
console.error('Place login!')
next({
path: '/login',
query: { redirect: to.fullPath }
})
}else{
next()
}
}else{
next()
}
})
const app = new Vue({
router
}).$mount('#app')
知识点:
router-link
在HTML5 history模式下使用了base选项,所有to属性可以不用写基路径
会拦击点击事件,不会重新加载页面.
router-link默认渲染为a标签,我们可以通过tag属性设置为别的标签(常用的li).
to属性可以绑定name(命名组件),query(带查询参数)
<router-link :to="{name:'entityList', query:{page: 'Ecp.SystemMessage.List.vdp'}}"
class="msg" tag="li">
</router-link>
router-view
router-view: 渲染匹配到的视图组件,router-view匹配到的视图组件里面还可以嵌套自己的router-view.根据嵌套路径(children)来继续渲染.
router-view可以通过name属性来渲染对应的component下相应的组件
router-view可以配合transition与keep-alive使用,如果同时使用,里面要使用keep-alive.
<transition name="fade" mode="out-in" key="$route.path">
<router-view></router-view>
</transition>
路由信息对象
一个 route object(路由信息对象) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录)
route object 是 immutable(不可变) 的,每次成功的导航后都会产生一个新的对象。
路由的滚动行为:当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样.(这个功能只在 HTML5 history 模式下可用)
当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法:
scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
scrollBehavior这个方法返回滚动位置的对象信息.如果返回一个布尔假的值,或者是一个空对象,那么不会发生滚动。
如:
return {x:0,y:0} // 表示对于所有路由导航,简单地让页面滚动到顶部。
return savedPosion; //表示在按下 后退/前进 按钮时,就会像浏览器的原生表现那样
if (to.hash) {
return {
selector: to.hash
}
}
// 模拟『滚动到锚点』的行为
return {x:0,y:0} // 表示对于所有路由导航,简单地让页面滚动到顶部。
return savedPosion; //表示在按下 后退/前进 按钮时,就会像浏览器的原生表现那样
if (to.hash) {
return {
selector: to.hash
}
}
// 模拟『滚动到锚点』的行为
// 全局钩子
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)
- next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。中断当前导航,然后进行一个新的导航。
})
// 单个路由独享的: 在自己的路由里面设置
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
// 组件内的钩子
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
router实例
router.app: 配置了 router 的 Vue 根实例。
router.mode: 路由使用的 模式。
route.currentRoute: 当前路由对应的 路由信息对象.
route.beforeEach(guard)
route.push() 跳转路由,会向 history 栈添加一个新的记录
等价于
<router-link :to="...">
router.push({ name: 'user', params: { userId: 123 }})
router.push({ path: 'register', query: { plan: 'private' }})
route.replace(): 它不会向 history 添加新记录,替换掉当前的 history 记录。
<router-link :to="..." replace>
route.Go(n):在 history 记录中向前或者后退多少(n)步.类似 window.history.go(n)
route.back()
route.forward()
异步加载
把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件.
// AMD风格
component: resolve => require([‘登录路径.vue’],resolve)