Vue之router学习

js小问题

expoert default可用于导出常量等等，仅能用一次。

起步

• 来导航
• to属性指定链接
• router-link 被渲染成 标签

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

• 路由出口 ，路由匹配到组件将渲染在此

定义

• 定义组件

const Foo={template:'<div>这是一个组件</div>'}

• 定义路由

const routes=[
	{path:'/foo',component:Foo}
]

• 创建和挂载根实例,注入路由器

const app=new Vue({
	router
}).$mount('#app')

• 诸如完毕，可以通过 this.$router来进行访问。

动态路由匹配

• path:’/user/:id’ 以冒号开头，会设置到this.$route.params中
• $route 还提供了其它有用的信息，例如 $route.query（如果url中有查询参数）、$route.hash等等。
• 组件复用问题：动态路由时出现，可以通过

watch:{  '$route'(to,from){...}  }

进行处理，或者引入beforeRouteUpdate(守卫导航)

通配符 AND 404

path:'*'匹配所有（通常用于404错误）
path:'/user-*'所有以/user开头的路径
使用this.$router.params.pathMatch来显示。

高级匹配

vue-router支持很多高级匹配

匹配优先级

同一个路由可以匹配多个路由，优先级按照路由定义顺序。

嵌套路由

/user/foo/profile ----> /user/foo/posts
User User
Profile ---------------------> Posts

const User = { template: '<div>...</div>'  }
const router = new VueRouter({
	routes:[
		{	path: ' /user/:id',
			component: User,
			children: [
				{path:'profile',...},
				{path:'posts',...}
			]
		}
	]
})

可以设置children中 path: ’ ’ 可以提供空的子路由进行渲染。

编程式的导航

1. 创建a标签来定义导航链接。声明式
2. router.push(…)导航到不同url（向history栈添加新的记录）。编程式

参数类型	形式	描述
字符串
对象	{path:‘home’}
命名路由	{name:‘user’ , params:{…}}	若提供path，则不需params
带查询参数	{path:’…’ , query:{…:…}}

push和replace

参数	描述
onComplete	完成时候调用
onAbort	终止时候调用

注意

• 目的地与当前路由相同，使用beforeRouteUpdate来响应。
• replace替换当前history记录。

router.go(n)

意思是向前或者向后退步。

操作History

router.push=window.history.pushState
router.replace=window.history.replaceState
router.go =window.history.go

命名路由

链接到命名路由

<router-link :to="{name:'user',params:{userId:123}}">User</router-link>

上面这段等于

router.push({name:'user',params:{userId:123}})

命名视图

同级展示多个视图（非嵌套）

<router-view  class="aaa"></...>
<router-view  class="bbb" name="b"></...>
<router-view  class="ccc" name="c"></...>

多个视图就需要多个组件

const router=new VueRouter({
	routes:[
		{
			path:'/',
			components:{
				default:Foo,
				b:Bar,
				c:Baz
			}
		}
	]
})

嵌套命名视图

{
      path:"/settings",
      component:Test,
      children:[{
        path:'email',
        component:TestEmail
      },{
        path:'profile',
        components:{
          default:TestProfile,
          helper:TestPreview
        }
      }]
    }

  <div>
    <span>setting</span>

    <router-view></router-view>
    <router-view name="helper"/>
  </div>

重定向

routes:[
	{path:'/a',redirect:'/b'}
]

访问/a就回到/b。

redirect: to =>{...}

作为方法，接受目标路由作为参数。返回重定向路径。

路由组件传参

解除耦合：

const User={
	props:['id'],
	template:'.......'
}

并且在Vuerouter中设置组件得props为true。

函数模式

props也可以设置函数模式。

{ path:'/..',component:...,props: (route) => (query: route.query.q) }

从而响应/..?q=vue会将{query:'vue'}传输。

前端路由模式

hash模式

使用url hash值来作路由，支持所有浏览器。
url改变，页面不会重新加载。
http://www.abc.com/#/hello ，hash值为 #/hello。hash不会在请求之中，对后端无影响，因此改变hash不会重新加载页面。
缺点是加上#后不太美观。

history模式

依赖html5 history api 和 服务器配置。充分利用history.pushState,跳转而无需重新加载。

abstract模式

支持js环境

符号

#是vue-router使用的hash符号
#！是angularjs使用的hash符号

导航守卫

跳转或取消的方式守卫导航。

全局前置守卫

router.beforeEach( 
(to,from,next)=>{  ... }   
)

• to 目标
• from 准备离开
• next 来resolve这个钩子，执行依赖next方法。next()进行管道下一个；next(false) 中断;next(’/’)跳转到下一个不同地址。

全局解析守卫

所有组件被解析后调用

全局后置钩子

router.afterEach

组件内部守卫

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

完整导航解析流程

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由元信息

在路由中这样设置

以后就可以在$route中查找到对应的元信息。

数据获取

导航后获取

在组件生命周期钩子获取。（获取其间显示‘加载’）。

导航前获取

守卫中获取数据。