vue路由

路由安装

npm install vue-router -S

基本路由

1.创建路由器

import Vue from 'vue' import VueRouter from 'vue-router' import About from './../pages/About.vue' import Home from './../pages/Home.vue' Vue.use(VueRouter) export default new VueRouter({   routes: [     {       path: '/about',       component: About     },     {       path: '/home',       component: Home     },     {       path: '/',       redirect: '/about'     }   ] })

2.注册路由器

import Vue from 'vue' import App from './App' import router from './router'   Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({   el: '#app',   components: { App },   template: '<App/>',   router })

3.使用路由器

<div> <h1>vue-router</h1> <div class="left">   <div><router-link to="/about">about</router-link></div>   <div><router-link to="/home">home</router-link></div> </div> <div class="right">    <router-view></router-view> </div> </div>

嵌套路由

1.配置路由器

import Vue from 'vue' import VueRouter from 'vue-router' import About from './../pages/About.vue' import Home from './../pages/Home.vue' import Message from './../pages/Message.vue' import News from './../pages/News.vue' Vue.use(VueRouter) export default new VueRouter({   routes: [     {       path: '/about',       component: About     },     {       path: '/home',       component: Home,       children: [         {           path: 'message',           component: Message         },         {           path: 'news',           component: News         },         {           path: '',           component: News         }       ]     },     {       path: '/',       redirect: '/about'     }   ] })

2.使用路由

<div> <router-link to="/home/message">message</router-link> <router-link to="/home/news">news</router-link> </div> <div> <router-view></router-view> </div>

缓存路由组件

有时候当我们通过路由切换视图的时候，希望之前加载的页面数据缓存下来，可以用keep-alive

<keep-alive>   <router-view></router-view> </keep-alive>

路由传值

router-link传值

<router-link :to="`/home/news?id=${item.id}`">news</router-link>

路由接受传参

this.$route.query.id

编程式路由导航

通过js实现路由跳转

$router是一个栈结构，push相当于新压入一个路径，replace相当于替换当前路径,back相当于回退也就是弹栈

pushShow(id) { this.$router.push(`/home/message?id=${id}`) }, replaceShow(id) { this.$router.replace(`/home/message?id=${id}`) }， backShow(id) { this.$router.back() }