Vue Router
2019-04-30 本文已影响0人
岁月静好_cd54
Router
router 基础
router配置文件 一个节点包含内容
Vue.use(Router)
export default new Router({
mode: 'history', //去掉路由上的hash："history",默认
base: process.env.BASE_URL,
/*可以加上link的值，不是强制性，区分页面路径与其他路径之类的，比如加入默认值 /base/*/
linkActiveClass: '', //全局link上激活的时候样式（二级菜单选中的时候，以及菜单也会显示）
linkExactActiveClass: "", //link上全部匹配的时候的样式
routes: [{
path: '/',
name: 'home',
redirect: '/home',
/*跳转*/
/*components:{default:defaultComponent,Aroutername:Acomponent} 在页面中有俩个 router-view的时候 且对应的name属性*/
component: Home,
children: [{
/*二级路由,一级组件里面的router-view*/
}],
/*router 操作
scrollBehavior(to, from, savedPostiton) {
//保存的原来的scroll 的位置
return {
x: 0,
y: 0
}
//return savedPosition
},
parseQuery(query) {},
fallback: true,
stringifyQuery(obj) {}*/
name："home",// 对应router-link 里面对象name
/*跟路由相关的信息，可以在路由进入页面的时候相关取到*/
meta:{
title:"this is app",
description:"des"
}
},
{
path: '/about/:urlId',
props:true,/*在组件中可以直接当作props
里面的数据*/
/* props:{urlId:'3333'}, props 书写方式2*/
/* props:(route)=>({urlId:route.query.b}), props 书写方式3*/
name: 'about',
/*懒加载，到达该path的时候才会加载对应的router.js*/
component: () => import( /* webpackChunkName: "about" */ './views/About.vue')
}
]
})
vue html 里面的router-view
<router-link to="/about">About</router-link>
<router-link to="/about/123">About</router-link>
/*query:a=aaa,b=bbb*/
/*params:urlId=123*/
<router-link to="/about/123?a=aaa&b=bbb">About</router-link>
<router-link :to="{name:'app'}">About</router-link>
<router-view name='Aroutername'/>
/*rotuer 页面显示的时候添加动画效果：name为动画对应的class name*/
<transition name="fade">
<router-view />
</transition>
组件内部的操作
mounted:{
console.log(this.$router)//任何组件取得的rotuer信息都是一致的
}
/***************************************/
props:["urlId"]
mounted:{
console.log(this.urlId)//取得router里面的pramas信息，可以实现解耦
}
/******************************************/
router 高级信息
router 配置
/*********main.js 注入router进去app的时候同级配置***************/
/************（router的全局钩子） 每次路由跳转的时候都会被调用的方法**************** */
/*跳转被调用之前进行一些校验 比如验证有些页面需要登陆才会进入等*/
router.beforeEach((to, from, next) => {
console.log("before each invoked")
next()
// if (to.fullPath === '/app') {
// next({
// path: "/login",
// replace: true /*history 是否存储 ，浏览器后退等作用 */
// } /*router配置里面的一个路由对象 */ )
// } else {
// next();
// }
})
router.beforeResolve((to, from, next) => {
console.log("before resolve invoked")
next()
})
/*跳转完成后 */
router.AfterEach((to, from) => {
console.log("after each invoked")
})
/*****router定义的时候每一个路由中的 配置*****/
routes: [{
path: '/',
name: 'home',
component: Home,
/****before enter*****/
beforeEnter(to, from, next) {
console.log('app route before enter')
next()
}
}]
与上一个事件同步的执行顺序
before each invoked,(BeforeEach 事件)
app route before enter,（app route配置里面的beforeEnter事件）
before resolve invoked（beforeResolve 事件）
after each invoked(AfterEach 事件)
/*******components 定义路由事件响应***********/
beforeReouteEnter(to, from, next) {
/*拿不到组件中的this，组件还没有create*/
console.log("componment before enter")
next()
/*组件被create之后操作数据对象等 this已经存在*/
next(vm=>{
console.log("component after enter this.id is "+vm.urlId)
})
},
/*同一个组件，不同的路由下面显示的时候，比如传递的参数不一样urlId*/
/*组件中的内容根据不同的参数显示不同的内容的时候变更，watch也能实现，复杂度高，*/
beforeReouteUpdate(to, from, next) {
console.log("componment update enter")
next()
/*组件被create之后操作数据对象等 this已经存在*/
next(vm=>{
console.log("component after enter this.id is "+vm.urlId)
})
},
/*提醒表达离开时候的提醒 confirm等*/
beforeReouteLeave(to, from, next) {
console.log("componment leave enter")
next()
if(confirm('are you sure?'))
{
next()
}
},
methods: {},
data {},
props {},
与上一个事件同步的执行顺序
before each invoked,(BeforeEach 事件)
app route before enter,（app route配置里面的beforeEnter事件）
component before enter(component 内部的beforeRouteEnter事件触发)
component update enter(component 内部的beforeRouteUpdate事件触发)(不同路由之间的同一个组件会有缓存，需要更新数据)
before resolve invoked（beforeResolve 事件）
after each invoked(AfterEach 事件)
/********比较用途******/
mounted:
{
/*相同组件不同参数之间切换不会被调用，所以需要用
beforeRouteUpdate， 可以用watch 效果不好
*/
console.log("todo.mounted");
}
热加载(lazy)
component: () => import( /* webpackChunkName: "about" */ './views/About.vue')
路由解耦Props
routes: [
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 props 选项：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
路由跳转router.push(...)方法
push 后面可以是对象，也可以是字符串：
// 字符串
this.$router.push('/home/first')
// 对象
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})
// 点击事件里面写
this.$router.push({ name: 'distributesList', query: { ruleForm: this.ruleForm }})
// 字符串
router.push('apple')
// 对象
router.push({path:'apple'})
// 命名路由
router.push({name: 'applename'})
//直接路由带查询参数query，地址栏变成 /apple?color=red
router.push({path: 'apple', query: {color: 'red' }})
// 命名路由带查询参数query，地址栏变成/apple?color=red
router.push({name: 'applename', query: {color: 'red' }})
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
router.push({path:'applename', params:{ color: 'red' }})
// 命名路由带路由参数params，地址栏是/apple/red
router.push({name:'applename', params:{ color: 'red' }})
<router-link :to="...">
// 字符串
<router-link to="apple"> to apple</router-link>
// 对象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由带查询参数query，地址栏变成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由带查询参数query，地址栏变成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由带路由参数params，地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>
1、关于带参数的路由总结如下：
无论是直接路由“path" 还是命名路由“name”，带查询参数query，地址栏会变成“/url?查询参数名：查询参数值“;
直接路由“path" 带路由参数params params 不生效;
命名路由“name" 带路由参数params 地址栏保持是“/url/路由参数值”;
2、设置路由map里的path值：
带路由参数params时，路由map里的path应该写成: path:'/apple/:color' ;
带查询参数query时，路由map里的path应该写成: path:'/apple' ；
3、获取参数方法：
在组件中： {{$route.params.color}}
在js里： this.$route.params.color
