自己看vue文档，难免有些地方不懂，自己整理一下，主要是vue-router具体实现的操作步骤。

安装

直接下载/CDN

Unpkg.com提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像

在 Vue 后面加载 vue-router，它会自动安装的：

NPM

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

如果使用全局的 script 标签，则无须如此(手动安装)。

#基础

开始

HTML:

显示的当前路由的内容

实现路由的跳转

JavaScript：

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

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

// 可以从其他文件 import 进来

const Foo = { template: '

' }

const Bar = { template: '

' }

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器，

// 或者，只是一个组件配置对象。

// 我们晚点再讨论嵌套路由。

const routes = [

{ path: '/foo', component: Foo },

{ path: '/bar', component: Bar }

]

// 3. 创建 router 实例，然后传 `routes` 配置

// 你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({

routes // (缩写)相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 记得要通过 router 配置参数注入路由，

// 从而让整个应用都有路由功能

const app = new Vue({

router

}).$mount('#app')

// 现在，应用已经启动了！

当 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active

步骤：

1.在main.js中引入vue-router

import Vue from 'vue'

import VueRouter from 'vue-router'

2.在main.js中使用这个router插件

Vue.use(VueRouter)

3.生成这个router实例

export default new Router(){

routes:[

{

path:'/',

name:'home',

component:Home

},{

path:'/list',

name:'list',

component:List

}

]

}

4.在index.js中把路由实例传递给Vue根组件

import router from './router'

new Vue({

el:'#app',

router,

template:'',

components:{ APP }

})

静态路由

静态配置的 ---> import ....

固定路径路由的配置

{

path:'/',

name:'home',

component:Home

},{

path:'/list',

name:'list',

component:List

}

动态路由匹配

只有动态路由可以做到分页的效果

{

path:'/list/:id',

name:'list',

component:List

}

list.vue

return {

title:""

}

}

export default{

mounted(){

if(this.$route.params.id == 1){

//请求第一页数据

this.title="第一页"

}

if(this.$route.params.id == 2){

//请求第二页数据

this.title="第二页"

}

}

}

接收多个个参数

index.js

{

path:'/list/:id/name/:name',

name:'list',

component:List

}

list.vue

return {

title:"",

name:""

}

}

export default{

mounted(){

//结构赋值写法

const {name,id} = this.$route.params;

this.name = name;

//this.name = this.$route.params.name;

if(this.$route.params.id == 1){

//请求第一页数据

this.title="第一页"

}

if(this.$route.params.id == 2){

//请求第二页数据

this.title="第二页"

}

}

}

传递不同参数 显示不同数据

项目应用：详情页

watch 响应路由参数的变化

监听路由的变化

watch:{

'$route'(to,from){

this.name = to.params.name;

}

}

在2.2中引入守卫( beforeRouteUpdate)

守卫 --> 钩子函数

beforeRouteUpdate (to, from, next) {

this.name = to.params.name;

next();//走到下一个钩子

}

嵌套路由

头部左侧不变只有内容区改变 这样的需求可以用嵌套路由来做

{

path:'/list',

name:'list',

component:List,

childeren:[{

path:'a',

component:A

}]

}

再引入一个A组件 A.vue

在list.vue组件中通过，显示A组件的内容

在一个非app组件里面写显示的是当前路由下子组件的内容

编程式的导航

除了来创建a标签来定义导航链接，还可以借助router的实例方法

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

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

想要导航到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的URL。

当你点击时，这个方法会在内部调用，所以说，

点击 ---> 声明式

等同于

调用router.push(...) --->编程式

可以在Header组件中跳转到list中

export defalut{

methods:{

handleClick(){

this.$router.push({

name:'list'

})

}

}

}

可以在Header组件中跳转到list/123中

export defalut{

methods:{

handleClick(){

this.$router.push({

//一种方式

//path:'/list/123',

//2种方式

name:'list'

params:{

id:123

}

})

}

}

}

使用router.push 或者 router.replace 里面都不能让path和params同时存在

//字符串

router.push('home');

//对象

router.push({path:'home'})

//命名的路由

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

//带查询参数，变成/register?plan=private

router.push({path:'register',query:{plan:'private'}})

router.replace

和router.push唯一的不同就是，不会向history添加新纪录，而是替换掉当前的history记录不能返回

router.go

命名路由

定义名字跳转

命名视图

var app = new VueRouter({

routers:[{

path:'/',

componens:{

defaults:Foo,

a:Bar,

b:Baz

}

}]

})

重定向和别名

访问/abc 重定向到/根路径

{

path:'/abc',

redirect:'/'

}

访问/bieming 实际上还是访问的根路径

{

path:'/',

name:'home',

component:Home,

alias:'/bieming'

}

路由组件传参

解耦

动态路由传id

{

path:'/list/:id',

name:'list',

component:List,

props:true

}

在list.vue中

可以直接通过props['id']获取数据

props['id']

}

对象模式

props:{name:"dell"}

一般是写死的字符串静态数据

函数模式

index.js

{

path:'/list/:id',

name:'list',

component:List,

props : (route)=>({

query:route.query.q

id:route.params.id

})

}

list.vue

props['query','id']

}

我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1rr2npw3kickj