Version: Next

路由

分为两种模式，在index.js中可以查看到

const router = new VueRouter({
mode: 'history', // 路由模式
base: process.env.BASE_URL, // 基础URL
routes
})
  • history
    • 使用HTML5的history接口
    • pushState修改URL时，不会向服务器发送请求
    • 像正常路径一样，URL中不会带#
    • 缺点是其实整个网站只有一个页面，需要在后端配置，不管收到什么请求，都始终返回那一个页面
    • 前端Vue工程决定渲染内容
  • hash
    • 有个#号在路径里
    • 不需要在后端做配置

具体渲染内容由<router-view>标签决定

动态路由

路由传参

  • :参数
  • ?参数
{
// 配置动态路由,有个id参数
path: '/article/:id',
name: 'article',
// 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/article.vue')
},

在组件中取参数id

  • $route.params.id用来取:传参
  • this.$route.query.参数名用来取?传参
  • 具体可以通过打印this的方式自己看参数列表
<template>
<div>
<h1>这是新闻页</h1>
<h2>新闻页ID：{ {$route.params.id} }</h2>
</div>
</template>
<script>
export default {
mounted(){ // 生命周期
console.log(this);
}
}
</script>

路由守卫

全局守卫

在index.js中设置，每一次路由跳转之前，之后，触发的操作

// 路由守卫，时间节点
// 每次跳转之前触发
router.beforeEach((to, from, next) => {
console.log('每次跳转之前触发')
// 需不需要继续跳转
console.log(to)
if(to.path == '/lifecom') { // 如果是去lifecom页面
next('/nopage') // 跳转到nopage，显示一句"你没权限"
} else {
next() // 否则正常跳转
}
})
// 跳转之后触发
router.afterEach((to, from) => {
console.log('跳转之后触发')
})

针对某一个路由单独设置

{
// 配置动态路由
path: '/luyou',
name: 'luyou',
// 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/luyou.vue'),
beforeEnter(to, from, next){
console.log('单独在路由页面进入之前')
next()
}
}

在组件内部配置

export default {
beforeRouteEnter(to, from,next){
console.log('组件路由进入之前')
next()
},
beforeRouteUpdate(to, from, next){
//article/123==>article/456
console.log('组件路由更新之前')
next()
},
beforeRouteLeave(to, from ,next){
console.log('组件路由离开之前')
next()
}
}