vue router的使用

---

一、安装

方法1、下载、引用：
<script src="/path/to/vue-router.js"></script>
方法2、安装、在根路由文件router/index引用，并use：：
npm install vue-router

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

方法3、Vue CLI

方法4: 构建开发版

二、使用

1. router根文件

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/login'
import Error from '@/views/error'
import todoRouter from './todo'
Vue.use(Router)

// 定义登录 404 页面路由
let routers = [{
  path: '/login',
  name: 'login',
  component: Login
},
{
  path: '*',
  redirect: '/error/404'
},
{
  path: '/error/:errorCode',
  name: 'error',
  component: Error
}
]
// 添加测试路由
routers.push(todoRouter )

//路由导出
export default new Router({
  scrollBehavior: () => ({  //设置滚轴位置，路由使用了keep-alive，则默认会保存当前路由组件的滚轴位置；y:0每次进入路由都初始化滚轴位置
    y: 0
  }),
  routes: routers
})

2. views/ router-view

test.vue路由文件

//渲染路径匹配到的视图组件test.vue
<template>
  <div class="test">
    <router-view></router-view>
  </div>
</template>

3. router路由子文件

当项目下有多组件，可以按照划分的模块，分别定义路由文件，再将各个路由文件根据模块划分的规则统一导入。

//某一功能模块的路由子文件一
import Layout from '@/views/test'
import i18n from '@/lang/i18n'

let Router = {
  path: '/todo',
  name: 'todo',
  component: Layout,
  redirect: '/todo/todoList',
  children: [{
    path: 'todoList',
    name: 'todoList',
    component: () => import(/* webpackChunkName: 'todo' */'@/views/todo/todo_list.vue'), //路由懒加载，
    meta: { //路由元信息，Router配置中的每个路由对象为路由记录、路由记录可嵌套。可遍历 $route.matched 来检查路由记录中的meta字段。
      product: 'todo'
    }
  },
  {
    path: 'createTodo',
    name: 'createTodo',
    component: () => import(/* webpackChunkName: 'todo' */'@/views/todo/createTodo'),
    props: {
      name: i18n.t('todo.createTodo')
    },
    meta: {
      asideHide: true,
      product: 'todo'
    }
  }]
}

export default Router

//某一功能模块的路由子文件二
import Layout from '@/views/ts'

let Router = {
  path: 'ts',
  name: 'ts',
  component: Layout,
  redirect: 'ts/tsList',
  children: [
    {
      path: 'tsList',
      name: 'tsList',
      component: () => import(/* webpackChunkName: 'todo' */'@/views/ts/ts_list.vue'),
      meta: {
        product: 'todo'
      }
    }, {
      path: 'tsDetail/:id',
      name: 'tsDetail',
      component: () => import(/* webpackChunkName: 'todo' */'@/views/ts/ts_detail.vue'),
      meta: {
        product: 'todo',
        dependOn: 'tsList'
      }
    }]
}

export default Router

//路由嵌套
import todoRouter from './todo'
import tsRouter from './ts'

/* 把vpc下面的所有路由放入vpc模块下面进行了嵌套 */
todoRouter.children.push(tsRouter, xxxRouter, ...)

export default todoRouter