依赖安装:(c)npm install vue-router

过程:

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)
使用new Router()定义一个路由,并export
在main.js中import该路由, 将定义个的这个路由挂载到vue的根实例中
然后可以使用<router-link :to="/***"></router-link>跳转页面

常用方法:

1.页面跳转方式:

  htm中使用的方式:

    ①不带参数写法:

      <router-link to="home">点我</router-link>

      <router-link v-bind:to="'home'">点我</router-link>

      <router-link :to="'home'">Home</router-link>

      <router-link :to="{ path: 'home' }">Home</router-link>

    ② 带参数写法:

     A: <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

      批注:路由配置格式:

        { path: '/user/:userId', name: 'user', component: User }

       导航显示:/user/123  

     B: <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

        批注:带查询参数

           导航显示:/register?plan=private

  js中使用的方式:

    ① this.$router.push('xxx')                                                                  //字符串,这里的字符串是路径path匹配噢,不是router配置里的name

    ② this.$router.push({ path: 'home' })                                             //对象

    ③ this.$router.push({ name: 'user', params: { userId: 123 }})         // 命名的路由 这里会变成 /user/123

    ④ this.$router.push({ path: 'register', query: { plan: 'private' }})       // 带查询参数,变成 /register?plan=private

2.获取路由相关参数: 

  ①  ‘http://localhost:8080/linkParamsQuestion?age=18’

    let age = this.$route.query.age; //问号后面参数会被封装进 this.$route.query;

  ②  'http://localhost:8080/linkParamsQuestion/user/evan/post/123’

    注:user/:username/post/:post_id(这种配置方式)

    let name = this.$route.params.name; // 链接里的name被封装进了 this.$route.params

 3.检测路由 

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

或者

watch: {
"$route": "routeChange",
}, methods: {
routeChange(){
console.log(this.$route.path);
} }

4.router属性

 
属性 说明
$route.path 当前路由对象的路径,如'/view/a'
$rotue.params 关于动态片段(如/user/:username)的键值对信息,如{username: 'paolino'}
$route.query 请求参数,如/foo?user=1获取到query.user = 1
$route.router 所属路由器以及所属组件信息
$route.matched 数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name 当前路径名字
 
 
注意:$router.matched属性,它是一个包含性的匹配,它会将嵌套它的父路由都匹配出来。

  例如,/home/news/detail/:id这条路径,它包含3条匹配的路由:

  1. /home/news/detail/:id
  2. /home/news
  3. /home

 5.在 router-view上加上一个唯一的key,来保证路由切换时都会重新渲染触发钩子了

<router-view :key="key"></router-view>

computed: {
key() {
return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
}
}

6.路由元信息meta字段

未完待续。。。。

7.非必传参数路由配置

应用:

this.$router.push({ path: 'member', query: { type: 1 }})

错误配置:

{
path: 'member/:type',
hidden: false,
component: resolve => require(['@/views/modules/main/delMan.vue'], resolve),//懒加载,
name: 'tag/index/member',
meta: { _menuName: '删除'}
},

效果:http://v.study.com/#/error/404?type=1

正确配置:

{
path: 'member',
hidden: false,
component: resolve => require(['@/views/modules/main/delMan.vue'], resolve),//懒加载,
name: 'tag/index/member',
meta: { _menuName: '删除'}
},

效果

http://v.study.com/#/test/member?type=1

相关资料:https://segmentfault.com/a/1190000009651628

       https://router.vuejs.org/zh-cn/essentials/getting-started.html

     https://www.cnblogs.com/Leo_wl/p/5702350.html 

    https://router.vuejs.org/zh-cn/essentials/nested-routes.html    

作者:smile.轉角

QQ:493177502

【vue】vue-router的用法的更多相关文章

  1. vue中的一些用法,持续更新中......

    1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}) ...

  2. 三、vue之router

    三.vue之router 此时vue的脚手架.创建项目已经完成. ... vue的运行流程 index.html-->main.js-->App.vue-->router/index ...

  3. Vue中router两种传参方式

    Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...

  4. Vue中directives的用法

    关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...

  5. Vue中mixin的用法

    在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...

  6. 四 Vue学习 router学习

    index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...

  7. Vue插件编写、用法详解(附demo)

    Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...

  8. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  9. vue 中router.go;router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

随机推荐

  1. nginx部署与安装

    1.在学习ngnix的时候,免不了需要进行安装,安装其实很简单,一个shell脚本就可以搞定可以参考如下 使用root用户执行nginx-install.sh脚本即可,脚本如下: #!/bin/bas ...

  2. react-conponent-secondesElapsed

    <!DOCTYPE html> <html> <head> <script src="../../build/react.js">& ...

  3. js-new、object.create、bind的模拟实现【转载备忘】

    //创建Person构造函数,参数为name,age function Person(name,age){ this.name = name; this.age = age; } function _ ...

  4. @Tranactional 注解分析

    Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力,如下是@Transactional注解的定义 @Tranactional注解分析 作用 ...

  5. clipboard.js -- js实现将文本复制到剪贴板的方法

    资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zeno ...

  6. font-face在ie无法识别问题

    font-face在ie的时候,需要其他格式eot,但是按照网上的设置无法识别,需要把原来的fotmat设置成format('eot');

  7. 微信小程序开发之初探

    本文是以一个简单的小例子,来简要讲解微信小程序开发步骤,希望促进学习分享. 概念 微信小程序,简称小程序,缩写xcx,英文mini program.是一种不需要下载安装即可使用的应用,它实现了应用“触 ...

  8. C#字典Dictionay多线程读是否是安全的

    答案:是线程安全的,只读不写多线程下,完全不需要加锁! 测试代码: using System; using System.Diagnostics; using System.Threading; us ...

  9. matlab练习程序(局部加权线性回归)

    通常我们使用的最小二乘都需要预先设定一个模型,然后通过最小二乘方法解出模型的系数. 而大多数情况是我们是不知道这个模型的,比如这篇博客中z=ax^2+by^2+cxy+dx+ey+f 这样的模型. 局 ...

  10. UE4照片级渲染Demo