vue-router 路由详解

原创 樱樱桃 随笔 vue.js 816阅读 2017-05-25 11:53:23 举报

vue2有着深度继承的路由插件,即:vue-router,其中文的API地址。

vue-router与其他的路由(direactor、sammy)等不同,它是与vue2深度继承的,所以路由也是针对vue组件的。
安装

直接下载 / CDN 方式

Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像https://unpkg.com/vue-router@2.0.0/dist/vue-router.js这样指定 版本号 或者 Tag。在 Vue.js后面加载 vue-router.js,它会自动安装的:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
NPM 方式

npm install vue-router
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:

import Vue from 'vue'
import VueRouter from 'vue-router'
//vueRouter是vue的插件,所以需要使用use方法来加载
Vue.use(VueRouter)
如果使用全局的 script 标签,则无须如此(手动安装)。

1.入门例子

下面是一个简单的入门例子,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-router功能</title>
<script type="text/javascript" src="js/vue.2.1.0.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>

<div id="app">
<h1 v-text="title"></h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 to 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 <a> 标签 使用标签的好处是能在切换模式的时候,router-link会自动修改模式 -->
<!--可以直接写style、css、id等属性,以及自定义的数据-->
<router-link id='foolink' data-n='2222' to="/foo" tag="li" style='color:red' class='linkCls'>Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-link to="/bar/bar01">Go to Bar01</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>

<script type="text/javascript">
//如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
//VueRouter是vue的插件,所以在入口文件需要用vue的use方法加载Vuerouter
// Vue.use(VueRouter)

var router = new VueRouter({
mode:'hash' //router的模式,分为history 、hash(默认)
,routes:[
{ path: '/foo', component: {template:'<div>foo</div>'} }
,{ path: '/bar', component: {template:'<div>bar</div>'} }
]
})
//如果使用全局的 script 标签,则无须如此(手动安装)。
var vm = new Vue({
el:'#app'
,router:router //通过vue配置中的router挂载router实例
,data:{
title:'Hello vue-router'
}
});
</script>
</body>
</html>
上面的例子中用到了两个标签组件

<router-link> 即:API
<router-link>组件支持用户在具有路由功能的应用中(点击)导航。 通过 to属性指定目标地址,默认渲染成带有正确链接的 <a/> 标签,可以通过配置 tag属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。另外,router-link可以直接添加class和style来写样式。
<router-link>比起写死的 <a href="...">会好一些,理由如下:

无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
在 HTML5 history 模式下,router-link会拦截点击事件,让浏览器不在重新加载页面。
当你在 HTML5 history 模式下使用 base选项之后,所有的 to属性都不需要写(基路径)了
<router-view>:组件是一个 functional 组件,渲染路径匹配到的视图组件。<router-view>渲染的组件还可以内嵌自己的 <router-view>,根据嵌套路径,渲染嵌套组件。

2.动态路由匹配

我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router的路由路径中使用『动态路径参数』
具体的demo代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-router功能 2 动态路由</title>
<script type="text/javascript" src="js/vue.2.1.0.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>

<div id="app">
<h1 v-text="title"></h1>
<p>
<router-link to="/user">user list</router-link>
</p>
<router-view></router-view>
</div>

<script type="text/javascript">

//用户列表组件
var UserList = Vue.extend({
data:function(){
return {
title:'用户列表'
,userList:[
{id:'1',name:'louis screw'}
,{id:'2',name:'shirley wang'}
]
}
}
,template:'\
<ul>\
<li v-for="user in userList">\
<router-link :to="{ path: \'/user/\'+user.id }">\
<span v-text="user.id"></span>\
<span v-text="user.name"></span>\
</router-link>\
</li>\
</ul>\
'
});

var User = Vue.extend({
data:function(){
return {
title:'User的详细页面'
}
}
,watch: {
'$route':function(to, from) {//监控在当前组件中路由发生变化时执行的函数,如果/user/1 切换到 /user/2时就会执行此方法
console.log(to,from)
}
}
,template:'\
<div>\
<div v-text="title"></div>\
<div>传递过来的用户编号 {{ $route.params.id }}</div>\
</div>\
'
});

var router = new VueRouter({
mode:'hash' //router的模式,分为history 、hash(默认)
,routes:[
{ path: '/', redirect: '/user' } //router的重定向方法
,{ path: '/user', component: UserList }
,{ path: '/user/:id', component: User }
]
});

//如果使用全局的 script 标签,则无须如此(手动安装)。
var vm = new Vue({
el:'#app'
,router:router //通过vue配置中的router挂载router实例
,data:{
title:'Hello vue-router'
}
});

</script>
</body>
</html>
上述的例子中有两个组件,UserList组件和User组件,在UserList组件中根据User的id切换User组件,并在User组件中得到uri传递过来的参数

2.1 获取路由参数

一个『路径参数』使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。于是,在 User的模板,输出当前用户的 ID:

var User = { template: '<div>User {{ $route.params.id }}</div>'}
你可以在一个路由中设置多段『路径参数』,对应的值都会设置到 $route.params中。例如:

模式 匹配路径 $route.params
/user/:username /user/evan { username: 'evan' }
/user/:username/post/:post_id /user/evan/post/123 { username: 'evan', post_id: 123 }
除了 $route.params 外,$route 对象还提供了其它有用的信息,例如,$route.query(如果 URL 中有查询参数)、$route.hash 等等。你可以查看 API 文档 的详细说明。

3.嵌套路由

实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件。
具体的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-router功能 3 嵌套路由</title>
<script type="text/javascript" src="js/vue.2.1.0.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>

<div id="app">
<h1 v-text="title"></h1>
<router-view></router-view>
</div>

<script type="text/javascript">

//用户列表组件
var UserList = Vue.extend({
data:function(){
return {
title:'用户列表'
,userList:[
{id:'1',name:'louis screw'}
,{id:'2',name:'shirley wang'}
]
}
}
,template:'\
<div>\
<ul>\
<li v-for="user in userList">\
<router-link :to="{ path: \'/user/\'+user.id }">\
<span v-text="user.id"></span>\
<span v-text="user.name"></span>\
</router-link>\
</li>\
</ul>\
<router-view></router-view>\
</div>\
'
});

var User = Vue.extend({
data:function(){
return {
title:'User的详细页面'
}
}
,template:'\
<div>\
<div v-text="title"></div>\
<div>传递过来的用户编号 {{ $route.params.id }}</div>\
</div>\
'
});

var router = new VueRouter({
mode:'hash' //router的模式,分为history 、hash(默认)
,routes:[
{ path: '/', redirect: '/user' } //router的重定向方法
,{ path: '/user'
, component: UserList
, children:[
//要注意,以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
// 当 /user/:id 匹配成功,子路由最好写成相对父路由的写法 或者 绝对全路径的方法
//path:'/user/:id' 和 path:':id' 最终的效果是一样的
{path:'/user/:id',component: User}
]
}
]
});

//如果使用全局的 script 标签,则无须如此(手动安装)。
var vm = new Vue({
el:'#app'
,router:router //通过vue配置中的router挂载router实例
,data:{
title:'Hello vue-router'
}
});

</script>
</body>
</html>
4.编程式的导航

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

4.1 router.push(location)

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="..."> 等同于调用 router.push(...)。

声明式 编程式
<router-link :to="..."> router.push(...)
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
4.2 router.replace(location)

跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

声明式 编程式
<router-link :to="..." replace> router.replace(...)
4.3 router.go

这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。
例子

// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)

// 后退一步记录,等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)
5.命名路由

有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。

var router = new VueRouter({
routes: [
{
path: '/user/:id',
name: 'user',
component: User
}
]
})
要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象:

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
这跟代码调用 router.push() 是一回事:

router.push({ name: 'user', params: { userId: 123 }})
这两种方式都会把路由导航到 /user/123 路径。

6.命名视图

有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置(带上 s):

var router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
7.重定向

重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:

var router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目标也可以是一个命名的路由:

const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至是一个方法,动态返回重定向目标:

const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
8.导航钩子

正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。

8.1全局钩子

你可以使用 router.beforeEach 注册一个全局的 before 钩子:

var router = new VueRouter({ ... })
router.beforeEach(function(to,from,next){

});
当一个导航触发时,全局的 before 钩子按照创建顺序调用。钩子是异步解析执行,此时导航在所有钩子 resolve 完之前一直处于 等待中。

每个钩子方法接收三个参数:

to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
确保要调用 next 方法,否则钩子就不会被 resolved。
同样可以注册一个全局的 after 钩子,不过它不像 before 钩子那样,after 钩子没有 next 方法,不能改变导航:

router.afterEach(route => {
// ...
})
8.2 某个路由独享的钩子

你可以在路由配置上直接定义 beforeEnter 钩子:

var router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
这些钩子与全局 before 钩子的方法参数是一样的。

8.3 组件内的钩子

最后,你可以使用 beforeRouteEnter 和 beforeRouteLeave,在路由组件内直接定义路由导航钩子,

var Foo = {
template: ...,
beforeRouteEnter:function(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 this
// 因为当钩子执行前,组件实例还没被创建
},
beforeRouteLeave:function(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 this
}
}
beforeRouteEnter 钩子 不能 访问 this,因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。

不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 vm 访问组件实例
})
}
你可以 在 beforeRouteLeave 中直接访问 this。这个 leave 钩子通常用来禁止用户在还未保存修改前突然离开。可以通过 next(false) 来取消导航。

评论 ( 1 )
最新评论
zhaoyanxiansen 2017-05-26 10:08:00 1F

文章出处在哪?