vue-router路由使用详解

简介

使用Vue.js开发SPA（Single Page Application）单页面应用。
vue-router可以通过html5的history API或者hash实现单页应用，即不刷新跳转，切换地址，只是页面上的组件的切换；
vue-router可以实现页面间传参等其他功能；

基本用法

当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

首先我们需要定义链接url，而vue-router使用对a标签进行包装。
HTML:

 

 

Javascript:

//1.定义(路由)组件

    var home = {template:'

This is Home Page。。。

'}

 

    var user = {template:'

This is User Page

'}

 

    //2.定义路由，这是一组路由，每个路由使用一个大括号

    const routes = [

        {path:'/home',component:home},

        {path:'/user',component:user}

    ];

    //3.创建路由实例,然后传入路由配置

    var router= new VueRouter({

       routes   //缩写，相当于routes:routes

    });

    //4.在Vue实例中注入路由

    var vm = new Vue({

        el:'#app',

        router   //缩写,相当于router:router

    });

运行一下，可以完美的跑起来。

router-link类样式

我们看一下控制台Elements，发现确实变成了标签,并且还为当前选定的添加了class “router-link-exact-active”和“router-link-active”，我们可以为其添加类样式。

还可以重新设置它的名称只需要在router路由实例中配置。

linkActiveClass:'active'//或其他值

HTML5 History模式

我们看路径，默认会给前面加上#号，可能会看起来很丑,我们可以使用HTML5 History模式。这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

const router = new VueRouter({

  mode: 'history',

  routes: [...]

});

而如果你这样做的话，后台服务器需要配置，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，可能就会出现404页面。那么就需要一个通配符的方法解决,你可以使用重定向。
3.重定向
1.通过路径方式

const routes=[

    ....

    //若为/,表示默认重定向/home路径，*则表示匹配任何则重定向到

    {path:'/',redirect:'/home'}//或者{path:'*',redirect:'/home'}

]

当匹配找不到的时候，就会转到这个路由。
2.通过路由名称
当然还可以通过路由名称的方式重定向,前提是你为路由设置了name参数

const routes = [

    {path:'/user',component:user,name:'user'},//此时通过name设置路由名称

    {path:'/',redirect:{name:'user'}}//此处通过name属性给与路由名称

];

嵌套路由

嵌套路由无非是在路由里再加路由，与组件一样。
假如user中需要login和regist

//重新为user定义模板

//为user路由添加子路由

children:[

    {path:'login',component:login},

    {path:'regist',component:regist}

}

//定义组件

var login = {template:'

用户登录

'}

 

var regist = {template:'

用户注册

'}

 

运行一下，可以正常显示。
注意user模板中的router-link和router-view，他俩是一一对应的，跟外面的不一样。

router-link标签渲染

前面说过，router-link的默认渲染为标签，我们可以更改,通过tag属性

User Login

regist" tag="li">User Regist

动态路由匹配

如果我们通过路径路径来匹配到某个路由。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』。
通俗地讲就是参数嘛，

         字符串参数 ?uname=xiao&pwd=123

         rest风格传参 /yao/456

当然我们这样映射路由的话，肯定是要参数值的，字符串的获得参数和rest获得参数使用了不同的方法

         字符串参数 $route.query

         rest风格参数 $route.params

//字符串参数的方式无需配置映射路径,直接显示

var login = {template:'

用户登录,获取参数,{{$route.query}}

'}

 

 

//rest方式

children:[

    {path:'login',component:login},

    {path:'regist/:uname/:pwd',component:regist}

]

var regist = {template:'

用户注册,获取参数,{{$route.params}}

'}

 

主要说一下第二种动态路径参数，它类似REST ful,匹配的路径都能够映射,一个『路径参数』使用冒号 : 标记 ,当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

响应路由参数的变化

当使用路由参数时，例如从 /user/login 导航到 /user/regist，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象

watch: {

    '$route' (to, from) {

      // 对路由变化作出响应...

    }

  }

匹配优先级

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

编程式导航

router.push向当前添加一个路由并使用

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

router.push(location, onComplete?, onAbort?)

注意:在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(...)。

声明式	编程式
	router.push(...)

//this.$router.push("home");//字符串，值为路由名称

//this.$router.push({path:'/user'});//对象，path指定路径

//this.$router.push({name:'regist',params:{uname:'chen',pwd:123}});//动态参数路由

//this.$router.push({path:'/user/login',query:{uname:'chen',pwd:123}});//带查询参数

以及

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

router.push({ path: `/user/${userId}` }) // -> /user/123

注意：如果提供了 path，params 会被忽略
你还需注意，你使用的方式是query还是params，如果你的path使用的是：标注方式的，则使用params，否则使用query

router.replace替换掉当前记录

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

声明式	编程式
	router.replace(...)

其语法结构与router.push方法完全一样，只不过重要的是，不会生成一条历史记录。

router.go(n)前进或后退

这个方法的参数是一个整数，意思是在 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)

原文链接: http://blog.51cto.com/zouzhelu/2107464

下载此文档：vue-router路由使用详解（潘信约）   类型：docx,   大小：26 KB