vue-router入门

单页应用路由~！vue-router官网

安装和配置

1. HTML引入vue.js和vue-router.js文件；
2. 新建js文件,搭建模版；
3. 关联vue-router；
4. 关联一个入口,
5. 完成HTML页面。

var routersArr = [
  {
    path:"/",
    component:{
      template:`
        <div>header</div>
      `
    }
  }，{
    path:"/about",
    component:{
      template:`
        <div>about</div>
      `
    }
  }
]；
var router = new vueRouter({
  routers:routersArr;
})；
new Vue({
  el:"#app",
  router:router
})

导航跳转，to=""与模版path对应

<div id="app">
  <div>
    <router-link to="/">header</router-link>
    <router-link to="/about">about</router-link>
  </div>
  <div>
    //必须有页面展示区
    <router-view></router-view>
  </div>
</div>

传参 动态路径

1. path:"/use/:name"传入，this.$route.params.name引用；
2. path:"/user/:name/post/:post_id"传入多段，this.$route.params={name:"Name",post_id:"postId"}；
3. URL地址htttp://www.xxx.com/use?name=lsd&age=18传入，this.$route.query.age引用；

传参时，改参数只会复用组件，不会重新调用生命钩子，需要watch路由的变化/或beforeRouteUpdate导航守卫，做出响应

子路由

var routerArr = {
  {
    name:"pathName",
    path:"/use/:name",
    component:{
      template:`
      <div>
      <p>hello,$route.params.name ~!</p>
      <router-link to="more" append >more</router-link>
      <router-link :to=`/user/${id}/more`>more</router-link>
      //方法二：<router-link :to="name:'user',params:{name:id}>more</router-link>
      <router-view></router-view>
      </div>`,
      children:`
        <div>more infos</div>
        <p>balabalabalalbala</p>
      `
    }
  }
}

  //路由的子路由跳转链接在显示区，点击后显示子路由显示区页面
  <router-link to="/user/lsd">lsd</router-link>

子路由配置空路径，默认子路由HOME，path:""；
子路由路径前没有"/"，父路径以"/"开头表示根路径；

跳转–手动访问和手动传参

this.$router.push("/path")/this.$router.push({path:"/"})/this.$router.push({name:"user",params:{userid:"123"}})/this.$router.push({path:"register",query:{plan:"private"}})或
子路由this.$router.push({name:"pathName",params:{name:"xxx"}})

提供了path，会忽略params，转而手写完整的参数path:`/user/${userId}`
通过props解耦传参id，利于复用和测试，不同模式作用不同：布尔、对象、函数，详参官网

//this.$router.push()  向history添加记录
<router-link :to=""><router-link>

//this.$router.replace()  同push()，不添加记录
<router-link :to="" replace><router-link>

//this.$router.go(n)  history向前或向后多少步
//效仿了Window.history的API:window.history.pushState，window.history.replaceState，window.history.go；

命名视图

router-view[name]对应path中的components:{name:{template,children}}区分插槽展示多个视图；默认为name：default的视图；

注意：components复数；嵌套视图

导航钩子

• 全局导航钩子：前置守卫router.beforeEach（(to,from,next)=>{}）、后置钩子router.afterEach((to,from)=>{}）、beforeResolve；
• 路由独享导航钩子：beforeEnter（(to,from,next)=>{}）、afterEnter（(to,from)=>{}）；
• 组件内导航钩子：beforeRouteEnter（(to,from,next)=>{}）、beforeRouteUpdate（(to,from,next)=>{}）、beforeRouteLeave（(to,from,next)=>{}）；

路由访问权限设置、管理页面路由权限、路由访问时的拦截导航操作；
拦截器怎样？？？

重定向

a重定向b，当用户访问/a时，URL会被替换成/b，匹配路由是/b；

const router = new VueRouter ({
	routes:[
		{path:"/a",redirect:{/b}},
		{path:"/a",redirect:{name:"foo"}},
		{path:"/a",redirect:to=>{...}},
		{path:"/a",component:A},
		{path:"/b",name:"foo",component:B}
	]
})

别名

a别名b，当用户访问/b时，URL保持为/b，匹配路由是/a；

const router = new VueRouter ({
	routes:[
		{path:"/a",component:A,alias:"/b"},
	]
})

History模式

vue-router默认hash模式使用URL，URL改变时，页面不会重新加载；
通过设置mode:"history"，可以利用window.history.pushState完成跳转不重新加载；

导航守卫

全局前置守卫：需调用next方法，否则钩子不触发resolved；

const router = new VueRouter({...})
router.beforeEach((to,from,next)=>{
	...
	if(...){
		next();//执行to路由
		next(false);//中断to路由，并可以回到from路由
		next("/");//跳转到“/”路由，可以设置任意新的路由
	}
})

全局解析守卫：router.beforeResolve解析之后触发；
全局后置钩子：和守卫不同，不接受next()函数，不改变导航本身；

router.afterEach((to,from)=>{...})//执行某逻辑

路由独享守卫：配置参数和全局一样，在路由上定义

const router = new Router({
	routes:[
		path:"/",
		component:Home,
		beforeEnter:(to,from,next)=>{...}
	]
})

组件内守卫：

const foo = {
	template:'',
	beforeRouteEnter (to ,from ,next){
	//不能获取this，组件实例还没被创建
	},
	beforeRouteUpdate (to ,from ,next){
	//组件被复用时，如动态传参的路由“:id”
	},
	beforeRouteLeave (to ,from ,next){
	//用于离开时，提醒未保存，next(false)中断
	}
}

完整解析流程

路由元信息

routes中每个路由记录（包括子路由）,都是一个$route对象，组成$route.matched数组；

router.beforeEach((to,from,next)=>{
if(to.matched.some(...)){
	next(false);
}else{
	next();
}
})

路由过渡效果

<transition name="fade">
	<router-view></router-view>
</transition>

通过<transition>设置，可以在各个组件内分别使用，设置不同的name;
watch $route变化动态赋值:name

获取数据

导航完成后获取：vue生命周期钩子created获取数据，并且可以设置loading状态；
导航完成前获取：组件内守卫钩子设置

export default {
	data(){
		return {}
	},
	created(){...},
	watch:{...},
	beforeRouterEnter (to,from,next){
		...//无法使用this，可以使用vm实例，当前实例未创建
	},
	beforeRouterUpdate (){...}
	befoerRouterLeave (){...}
}

路由懒加载

vue的异步组件配合webpack的code-splitting使用；组件按组分块，使用webpack的特殊注释语法设置chunk name；