路由：
在<router-view> 中显示跳转位置，注意点：
- exact
- router-link
<router-link to="/app/123">app</router-link>
<router-link to="/login">login</router-link>
<router-link :to="{name:'login'}">login</router-link>
<router-link to="/login/exact">login exact</router-link>
<router-view/>重点：props的使用。
//******注意：尽量用props属性，让组件跟路由解耦,复用性更高
//还有子路由 path:‘：id’的用法
props：（route）=>({id:route.query.b})
props: {id:"456"}
在组件内props:['id'], console.log(this.id)异步路由：
component: () => import('../views/todo/todo.vue') //按需加载，优化利器处理一个路由跳转两块布局的情况:
/*components:{ //处理一个路由跳转两块布局的情况
default:Todo, //<router-view>
a:Login //<router-view name="a">
}*/children: [ { path: 'test',
component: Login } ] routes.js
-----------------------------------------------------------------------
export default [
{
path: '/',
redirect: '/app' //默认路由跳转
},
{
// path: '/app/:id', //路由传参** :id (重*要)
path: '/app', // 类比：query ?a=123&b=456 通过this.$router获取
props: true, //设置为true， 在组件内直接可以通过props取出————props：['id']
还可以指定传入id, eg:props:{id: '456'}, props: (route) => ({ id: route.query.b })b就是456
component: () => import('../views/todo/todo.vue'), // --- 异步路由
name: 'app', //路由命名 <router-link :to="{name:'app'}"></router-link>
meta: {
title: 'this is app',
description: 'asdasd'
},
beforeEnter (to, from, next) {
console.log('app route before enter')
next()
}
// children: [ //子路由
// {
// path: 'test',
// component: Login
// }
// ]
},
{
path: '/login',
component: () => import('../views/login/login.vue')
// component: Login
}
]router.js //router 参数 routes
知识点：
- mode:history . 默认是hash路由，url后有#,修改为history
- query查看每个url上带的参数。this.$router
import Router from 'vue-router'
import routes from './routes'
export default () => {
return new Router({
routes,
mode: 'history', //默认hash， 修改为histroy后，url无#
// base: '/base/', //默认跳转的路由加入base,基路径,非强制性
linkActiveClass: 'active-link', //<router-link to="/app"> app</router-link>
linkExactActiveClass: 'exact-active-link',
scrollBehavior (to, from, savedPosition) { //页面路径跳转的时候，页面要不要滚动
if (savedPosition) {
return savedPosition //（要不得要定位到上处）
} else {
return { x: 0, y: 0 }
}
}
// fallback: true //不是所有浏览器支持history模式，一般就用true开启多页应用
// parseQuery (query) { //url 后面的参数 ?后面的货 // },
// stringifyQuery (obj) { //字符串转对象
// }
})
}路由守卫---利器
作用：跳转前后座检查，如：身份检查，地址检查，登录状态检查
const router= createRouter()
router.beforeEach((to,from,next)=>{
console.log('before each invoked')
if(to.fullPath ==='/login'){ //跳转之前可做判断，做一些预处理，如：验证用户登录
next({path:'/login'})
}else{
next()
}
})
router.beforeResolve((to,from)=>{
console.log('before resolve invoked')
})
router.afterEach((to,from)=>{
console.log('after each invoked')
})组件内部
beforeRouteEnter(to,from,next){
next(vm=>{
console.log('after enter vm.id is',vm.id)
})
},
beforeRouteUpdate(to,from,next){ //路由更新的时候出发，wactch方法增加开销较大
next()
},
beforeRouteLeave(to,from,next){ //可做确认离开判断
if(global.confirm('are you sure?')){
next()
}
},webpack相关配置
historyApiFallback:{ //前端刷新界面默认回到这个界面
index:'/public/index.html' //这货地址跟config.output.public的值相关
}
eg:webpck.base.config.js处
config={
...
output:{
...
publicPath:'/public/' //historyApiFallback的基路径
}
}将路由的dom缓存到内存中 --- ---性能优化
<keep-alive>
<router-view></router-view>
</keep-alive>