Vue-Router笔记

vue2.x版本中组件路由通过

<router-link>

标签配置，默认其将会被解析为一个

<a>

标签，当然你也可以使用tag属性将其渲染为其他的标签；进行了路由配置的组件可以通过

<router-view>

在HTML中整体渲染；当前router-link对应的路由处于激活状态时，自动被设置值为.router-link-active的class属性；

<router-view>

可以结合

<keep-alive>

标签一块使用

路由配置过程

// 路由配置
// 定义路由组件
const Foo = {template: '<div>foo</div>'}
const Bar = {template: '<div>foo</div>'}
// 为组件配置路由
const routes = [
{path: '/foo', component: Foo},
{path: '/bar', component: Bar}
]
// 创建router实例
const router = new VueRouter({
routes
})
// 创建和挂载根实例
const app = new app({
router
}).$mount('#app')

动态路由

使用模式匹配将匹配到的所有路由都映射到同一个组件，是多对一的关系；动态路径参数使用

:

进行标示，可以同时使用多个动态路径参数，并通过this.$route.params.paramName进行访问；

模式	匹配路径	$route.params
/user/:username	/user/James /user/Jordan	{username: ‘James’} {username: ‘Jordan’}
/user/:username/NBA/:id	/user/Kobe/NBA/24	{username: ‘Kobe’, id:24}

路由信息对象（route object）记录当前已激活路由的状态信息，并且包含了当前url解析的相关信息；route object是一个不可变对象，因此每次成功进行到新的URL后会重新创建对应的route object对象；

route object除了route.$params属性外，还有这些属性：

1、

$route.path

：String类型，对应当前的绝对路径；

2、

$route.hash

：String类型，当前路由的hash值(带

#

);

3、

$route.query

：Object类型，键值对格式，URL的查询参数；

4、

$route.fullPath

：String类型，包含hash和query的完整URL路径；

5、

$route.matched

：数组类型，当前路由在内的所有嵌套路由记录（路由记录：routes对象数组中的每个成员都是一个路由记录）；

6、

$route.name

：String类型，当前路由名称；

动态路由结合

<transition :name=transitionName>

组件可以实现根据动态路由实现不同的过渡效果；实例可以查看此处

// HTML
<transition :name="transitionName">
<router-view></router-view>
</transition>

// JS
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length;
const fromDepth = from.path.split('/').length;
this.transitionName = toDepth < fromDepth ? 'scroll-left' : 'scroll-right';
}
}

嵌套路由

嵌套路由需要在父组件的模板中加入

<router-view>

作为子组件的渲染出口，并在routes中使用children定义子组件中路由的映射；以下是来自Vue.js官网的示例；

const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}

const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
// UserHome will be rendered inside User's <router-view>
// when /user/:id is matched
{ path: '', component: UserHome },

// UserProfile will be rendered inside User's <router-view>
// when /user/:id/profile is matched
{ path: 'profile', component: UserProfile },

// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
{ path: 'posts', component: UserPosts }
]
}
]
})

上例中为/user/foo通过

''

进行映射，否则/user/foo无法匹配到任何路由；

编程式导航

vue有三种路由模式，分别是history（基于HTML5 history API）、hash（默认, url hash，所有浏览器支持）和abstract（支持所有JavaScript运行环境）；其中history路由模式是模仿window.history API得到的，对应有route.push(location)、route.replace(location)、route.go(n)方法进行导航；route.push()和route.replace()方法可以接受的参数类型包括字符串及多种不同类型的路由：

route.push('home');
route.push({path: 'home'});
route.push({path: 'home', name: 'google'});
route.push({params: {uid: 123});
route.push({path: 'register', query: {username: 'Kobe'});

命名路由和命名视图

命名路由可以前边已经提到，就是在创建VueRouter实例时，为path路径添加一个name属性，然后就可以直接使用包含name属性的对象传递给

<router-ling>

的to属性（路由信息对象），而不用直接使用相应的URL，这样后期修改的时候只需要修改VueRouter实例中；

为了在同一页面中不使用组件嵌套同时展示多个视图，可以使用命名视图，相应的关键字为

components

；需要注意其与嵌套路由的区别；

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

重定向和别名

重定向使用

redirect

关键字，而别名则可以跳出嵌套路由访问的限制，实例可以查看[我的JSFiddle示例]

const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})

// HTML

<div id="app">
<router-link to="/abc">foo</router-link>
<router-link to='/x'>bar</router-link>
<router-l

// JS
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }

const router = new VueRouter({
//mode: 'history',
routes: [
{ path: '/x',
component: Bar,
alias: '/xyz'
},
{ path: '/',
component: Foo,
alias: '/abc'
},
{ path: '/p',
component: Baz,
alias: '/opq'
}
]
})

滚动行为

Vue-Router提供了自定义页面切换路由时控制页面的滚动方式；前提是需要设置mode为history，也就是说不支持HTML5 history API的浏览器是不支持该特性的；

关键词为

scrollBehavior(to, from, savedPosition)

方法；to和from都是路由对象，而savedPosition仅在popState事件被触发后（使用浏览器的back/forward导航按钮）才使能；返回值为包含x坐标和y坐标的对象或者表示某个锚点的选择器对象{selector: string}；具体效果可以参考jsFiddle

const scrollBehavior = (to, from, savedPosition) {
if (savedPosition) {
// check if history popstate navigatios are available
return savedPosition;
} else {
const position = {};
// check if hash is available
if (to.hash) {
position.selector = to.hash;
}
// check if any matched route config has meta that requires scrolling to top
if (to.matched.some (m => m.meta.scrollTop)) {  // $router.matched
position.x = 0;
position.y = 0;
}
return position;
}
}

路由的懒加载

在访问大型应用时，较较多的JS脚本加载时间明显影响网站加载的速度，结合Vue的异步组件和webpack的代码分割功能（分割模块，可以仅加载依赖模块）实现路由组件的懒加载，可以有效的提高网站打开速度，在后期需要时再加载其他模块；

具体内容可以查看官方文档

Router配置

router对象具有mode（路由模式）、base（基路径）、routes（路由组件映射）、linkActiveClass(可以修改默认激活路由的类属性名称)、scrollBehavior（滚动行为）；具有参见官方文档

Router实例

属性：

1、router.app：Vue实例类型，配置了router的Vue根实例

2、router.mode：String类型，路由模式

3、router.currentRouter：Route类型，当前路由的路由信息对象；

方法：

1、router.go(n) 、router.back()、router.forward()

2、router.push(location, onComplete?, onAbort?)、router.replace(location, onComplete?, onAbort?)

3、router.addRoutes(routes) 动态添加新路由规律

4、router.onReady(callback) 第一次路由跳转完成时被调用

5、router.resolve() 解析目标位置

参考文献

1、Vue-Router官方文档

2、GitHub代码示例： https://github.com/vuejs/vue-router/blob/next/examples/scroll-behavior/app.js