*mode: "history", //对浏览器比较友好
base: process.env.BASE_URL, 在vue.config.js（node代码）中配置的基础路径
vue.config.js 命令行工具要传给webpack的一些参数*
module.exports = {
publicPath: '/kCart', //在所有的路径前加的名称
configureWebpack: { //可配置代理和开发服务器数据的模拟
//开发服务器可配置代理和数据的模拟
devServer: {
before(app) { //before 服务器启动之前的一个钩子函数 可以对实例做一些提前的操作
//app是express实例 后台服务器
app.get('./goods',(req,res)=>{// 接收请求和响应 req请求中拿参数 res响应写数据
res.json([
{
id: 1,
text: 'afv'
},
{id:2,text:'afv'}
])
})
}
}
}
}
路由嵌套
配置：children
父组件：
传参：
{
path: '/detail/:id',
component: Detail,
meta: {
requireLogin: true
},//可在全局路由中使用 去判断条件 比如是否登陆
props: true
}, 路由守卫（全局）
每次路由激活之前都会执行回调函数
router.beforeEach((to, from, next) => {
console.log(to.meta)
// 判断是否登录
if (to.path === '/about' && !window.isLogin) {
next('/login?redirect=' + to.path)
} else {
next()
}
})路由独享守卫（路由级）
{
path: '/about',
name: 'about',
meta: {
requireLogin: true
},
beforeEnter (to, from, next) {
// 判断是否登录
if (!store.state.isLogin) {
next('/login?redirect=' + to.path)
} else {
next()
}
},
// 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')
}获取查询参
methods: {
onLogin () {
window.isLogin = true// 登录成功
// 拿出重定向的地址
// 获取查询参
const redirect = this.$route.query.redirect || '/'
// 路由到重定向的地址 $router路由器 路由的操作
// 参数的附加者都是路由
this.$router.push(redirect)
}
}组件内的守卫（组件级）
export default{
beforeRouteEnter(to,from,next){}
beforeRouteUpodate(to,form,next){}
beforeRouteLeave(to,from,next){}
}完整的导航解析流程
*导航被触发
调用全局的beforeEach守卫 //可能初始化的一些工作还没做完
在重用的组件里调用beforeRouteUpdate守卫
在路由配置里调用beforeEnter
在激活的组件里调用beforeRouteEnter
调用全局的beforeResolve 守卫（2.5+）//组件里面提前的事情已经准备好，时间点与beforeEach比 靠后一点
导航被确认
调用全局的afterEach钩子//路由触发后做一些额外的事情
触发DOM更新*