手记

Vue2.0笔记——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使用<router-link>对a标签进行包装。
HTML:

<div id="app">    <div>        <!-- 通过router-link来导航,to属性指定链接, 默认 会渲染成a标签 -->        <router-link to="/home">Home</router-link>        <router-link to="/user">User</router-link>    </div>    <div>        <!-- 路由出口,路由匹配到的组件将在这里渲染 -->        <router-view></router-view>    </div></div>

Javascript:

//1.定义(路由)组件    var home = {template:'<p>This is Home Page。。。</p>'}    var user = {template:'<p>This is User Page</p>'}    //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,发现确实变成了<a>标签,并且还为当前选定的<router-link>添加了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定义模板<template id="user">    <div>        <ul>            <li><router-link to="/user/login">User Login</router-link></li>            <li><router-link to="/user/regist">User Regist</router-link></li>        </ul>        <router-view></router-view>    </div></template>//为user路由添加子路由children:[    {path:'login',component:login},    {path:'regist',component:regist}}//定义组件var login = {template:'<p>用户登录</p>'}var regist = {template:'<p>用户注册</p>'}

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

router-link标签渲染

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

<router-link to="/user/login" tag="li">User Login</router-link><router-link to="/user/regist" tag="li">User Regist</router-link>

动态路由匹配

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

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

  • rest风格传参 /yao/456

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

  • 字符串参数 $route.query

  • rest风格参数 $route.params

//字符串参数的方式无需配置映射路径,直接显示var login = {template:'<p>用户登录,获取参数,{{$route.query}}</p>'}//rest方式children:[    {path:'login',component:login},    {path:'regist/:uname/:pwd',component:regist}]var regist = {template:'<p>用户注册,获取参数,{{$route.params}}</p>'}

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

响应路由参数的变化

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

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

watch: {    '$route' (to, from) {      // 对路由变化作出响应...    }  }

匹配优先级

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

编程式导航

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

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

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

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

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

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

声明式编程式
<router-link :to="...">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/123router.push({ path: `/user/${userId}` }) // -> /user/123

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

router.replace替换掉当前记录

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

声明式编程式
<router-link :to="..." replace>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)

0人推荐
随时随地看视频
慕课网APP