Vue-router简单说明、使用、拓展路由模块

vue-router

Vue官方文档

router-link属性用法补充

1、to属性用于跳转路径，router-link最终会被渲染成a标签
2、tag属性，会决定渲染成什么元素，如

<router-link to="/about" tag="li">关于</router-link>

会被渲染成li元素
3、replace ，直接添加replace，没有属性值，不会留下history记录，所以指定replace的情况下
后退键返回不能返回到上一个页面中，后退键返回不能返回

<router-link to="/about" tag="li" replace>关于</router-link>

4、组件显示的时候，会出现两个class,例如

<button data-v-7ba5bd90="" class="router-link-exact-active router-link-active">关于</button>

可以在router-link-active更改样式。

代码实现路由的跳转
App.vue

<template>
  <div id="app">
    <button @click="homeclick">homeclick</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    homeclick(){
      //通过代码的方式来改变路由
      //使用catch来处理异常
      this.$router.replace('/home').catch(err=>{}))
    }
  }
}
</script>
<style scoped>
</style>

需要注意的是
在vue-router在3.1.0版本之后，push和replace方法会返回一个promise对象，如果跳转到相同的路由，就报promise uncaught异常

解决方案
方案01-降版本
使用vue-router 3.1.0之前的版本就不会有这个错误。但是不推荐，因为这样就无法得到vue-router新版本提供的功能了。
方案2-使用catch捕获异常
在使用push或者replace的时候，需要使用catch来处理异常
// 在使用push的时候，需要使用catch来处理可能出现的异常

this.$router.push('/login').catch(err => {})

缺点：在使用push的时候，都需要使用catch处理
方案3-修改push方法
在router/index.js导入VueRouter的时候，进行全局的处理

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
// 重写了原型上的push方法，统一的处理了错误信息
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

动态路由

在App.vue文件中，to属性中添加userID变量并绑定

<router-link :to="'/users/'+userID" tag="button">用户</router-link>

在路由js文件中
在地址后面添加 :testName

{
    path:'/users/:testName',
    component: users
}

然后在组件user.vue文件中
注意的是这里是route，就可以获取前面的userID参数

<template>
<div>
  <h1>{{$route.params.testName}}</h1>
</div>
</template>

异步组件
官方文档说明

路由的懒加载(提高效率)

路由懒加载的主要作用就是将对应的组件打包成一个个的js代码块
只有当这个组件被访问的时候，才加载对应的组件
方式一:AMD写法

const About = resolve => require(['../components/About.vue'],resolve);

方式二：在ES6中，可以更加简洁来组织Vue异步组件和Webpack的代码分割

const Home = () => import('../components/Home.vue')

命名路由

官方文档

嵌套路由

在路由js文件中
父组件的配置

{
    path:'/users/:testName',
    component: users,
    //子组件和父组件的写法一致
    children:[
        {
            path:'news',
            componment:News
        },
        {
            path:'food',
            componment:Food
        }
    ]
}

在父组件vue文件中

<template>
<div>
  <router-link to="/users/news">新闻</router-link>
  <router-link to="/users/food">食物</router-link>
  <router-view></router-view>
</div>
</template>

就可以等父组件处于活跃时就可以使用了

路由参数传递
还没总结完，，会持续更新

拓展路由模块

路由index.js

import userRouters from './newuser'
const routes = [
       // 登录界面
    {
    path: '/',
    component: Login,
    children:[
      {
        path:'/user-login',
        component:UserLogin
      },
    
    ]
  },
  //拓展路由模块
    ...userRouters
  
]

同目录下的用户路由newuser.js

import new_user_login from '../components/Login/newuser-login'

let userRouter=[
    {
        path:'/test',
        component:new_user_login
    }
]

export default userRouter

编程式跳转

编程式跳转路由的几种方式

1.字符串形式

this.$router.push("/search"+this.keyword+"?k="+this.keyword)

this.$router.push(`/search/${this.keyword}?k=${this.keyword}`)

2.对象这种写法，有path 和 name两种写法，但是path不能和parmas混合使用

this.$router.push({
   name:"search",
   params:{
   },
   query:{
   }
})

重写push和replace方法

push是VueRouter的原型对象上一个实例，replace也是如此

let orgin_router = VueRouter.prototype.push;
VueRouter.prototype.push = function(location,reslove,reject){
  if(reslove&&reject){
    orgin_router.call(this,location,reslove,reject)
  }else{
    orgin_router.call(this,location,()=>{},()=>{})
  }
}

补充：

$route和$router的区别

$route一般获取路径，query,params
$router一般用于路由跳转

URL的hash

URL的hash也就是锚点（#），本质上是改变window.location的herf属性
可以直接通过赋值location.hash来改变herf，但是页面不刷新。
页面控制台，输入

location.hash=aaa

可以观察到

http://localhost:8080/#aaa

Html的History模式

页面控制台，输入，输入多个就类似于栈结构，先进后出history.back()

history.pushState({},'','about')

可以观察到

http://localhost:8080/about

如果要是repalce,顾名思义，不存在压栈操作，只有替换，不产生记录

history.replaceState({},'','name')

如果在页面控制台输入，-1相当于一个history.back(),以此类推

history.go(-1)

补充

history.forward()类似于history.go(1)

params参数可传可不传

{
  name:"/home:keyword?"   //占位符后面加个？
  component: () => import("@/pages/Home/index")
}

路由组件可以传props

推荐文章

vue-router的两种参数传递方式：params和query