Vue2.0笔记——vue-router路由

Posted 2020-11-01

简介

使用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/123
router.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)