文档 https://router.vuejs.org/zh-cn

npm  install vue-router --save

调用

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)

 

流程

a. views目录内组件

b. router目录映射路由js   (路径与a中组件)

c. main.js 对象属性router

d. 标签router-link / router-view

 

 

1.基本路由

index.html

routeview 标签选中自带class .router-link-active  ，定义样式

views/About.vue

与路由相关组件放置与views目录下

views/Home.vue

router/index.js

绑定path与对应views下的组件

使用redirect 跳转默认页

/** * Created by infaa on 2018/9/21. */import Vue from 'vue'import VueRouter from 'vue-router'import About from '../views/About.vue'import Home from '../views/Home.vue'Vue.use(VueRouter)export default new VueRouter({  routes: [    {      path: '/about',      component: About    },    {      path: '/home',      component: Home    },    {      path: '/',      redirect: '/about'    }  ]})

app.js

使用router 方法，利用router-link  to=''xxx“区分  ，router-view 自动匹配到views下的组件

main.js 需要注册router

/** * Created by infaa on 2018/9/19. */import Vue from 'vue'import App from './App'import router2 from './router'/* eslint-disable no-new */new Vue({  el: '#app',  components: {App},  template: '
      ',  router: router2})

 

2. 嵌套路由

页面内子页面含有需要路由页面（子标签页等）

注册路由时，使用children ：[]  ,注意path: '/home/childa' 绝对路径形式  或者 path:'childa'

代码略

 

3. 缓存路由组件

路由组件切换时死亡，切换回来时重新创建。

来回切换时内容消失

调试时发现切换后消失，只有about home之一

 

 

缓存 对router-view使用keepalive标签

 app.uve

切换后input内容不消失。

路由组件不重建

 

 

 

4. url参数传递

path: '/home/msssage/:urlid'

传递router-link  to="`/home/message/${message.id}`"

routerview的id  {

{route.params.id}}

routerview的内容

const id = this.$route.params.id*1     (*1 转化为num)

this.msgDetail = this.allMSG.find(detail => detail.di ===id)

 

 

5. router-view 参数传递

router-view msg="abc"

通过props

 

6. 编程式路由导航

影响返回前进

this.$router.push

this.$router.replace

 this.$router.back

 

## 注意route  当前组件

router 路由器   push replace  back方法