vue路由

1、安装vue-router

npm install vue-router --save

2、使用

import Vue from 'vue'
import VueRouter from 'vue-router'// 导入路由插件
import Home from '../views/Home.vue'

Vue.use(VueRouter) // 初始化路由插件
// 配置路由关系
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
// 创建路由对象
const router = new VueRouter({
  routes
})

export default router

3、使用路由

<router-link to="/">Home</router-link> |

<router-view/>来使用路由。

<router-link>是路由的链接按钮，最终渲染成a标签。

<router-view/>占位，是组件内容显示的地方。

4、修改成history模式

const router = new VueRouter({
  routes,
  mode: 'history'
})

5、router-link渲染成button

 <router-link to="/" tag="button">Home</router-link> |

6、router-link被点击时会加上一个class

class="router-link-exact-active router-link-active"

7、通过代码进行路由跳转

this.$router.push('/home')

this.$router.replace('/home')

8、动态路由：

$route.params.userId//动态拿到当前活跃路由

9、路由懒加载：

当打包构建时，js包会变得非常大，影响页面加载。我们把不同路由分别打包到不同js中就是路由懒加载。

代码：

{
   path: '/home',
   component: resolve => require(['../components/home.vue'], resolve),
 }

{
   path: '/about',
   name: 'about',
   component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
 }

10、路由嵌套：需要在home组件中添加占位

<router-view/>

{
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: Home,
        component: Home
      }
    ]
  },