10. vue-router 路由详解

作者: 白水螺丝 | 来源:发表于2016-12-05 11:22 被阅读9121次

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) 来取消导航。

10. vue-router 路由详解

安装

直接下载 / CDN 方式

NPM 方式

1.入门例子

2.动态路由匹配

2.1 获取路由参数

3.嵌套路由

4.编程式的导航

4.1 router.push(location)

4.2 router.replace(location)

4.3 router.go

5.命名路由

6.命名视图

7.重定向

8.导航钩子

8.1全局钩子

8.2 某个路由独享的钩子

8.3 组件内的钩子

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

转载的～vue

WEB前端程序开发

vue