接着上一节讲，根本框架曾经搭建实现，接下来最重要的就是我的项目里路由配置了，它治理着页面间的跳转，咱们做前端我的项目，基本上步骤就是：搭建前端框架--配置我的项目路由--开发具体页面，依照这一步骤，咱们来具体解说一下vue Router的常识和应用办法，学习这篇文章你能够能够对照着官网文档Vue Router来学习
咱们来看一下src/APP.vue外面的内容：
<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div></template>其中<router-link></router-link>和<router-view/>都是vue的内置组件，这里简略介绍下这种内置组件的作用
<router-link></router-link> 它是一个闭合标签，等同于封装后的a标签，外面有一个很重要的属性to，它的值是一个须要跳转的门路<router-view/> 它是一个开标签，等同于<router-view></router-view>，它是视图渲染组件，通过<router-link>跳转到某个页面时所加载的组件都会在这里渲染可能有些人有些疑难，什么是闭合标签什么是开标签呢？
简略介绍一下，比方<router-link to="/">Home</router-link>它外面有home这个内容，所以只能写成闭合标签，像<router-view></router-view>这种标签，外面没有内容，就能够简写成开标签<router-view/>
接下来切入正题，咱们来说第一个知识点：
- 动静路由匹配
来举一个理论的例子：有一个页面，展现的是所有工作的一个table页，在table页的每一行，都有一个查看按钮，点击查看能够跳转到工作详情的页面，查看工作具体数据
http://10.0.0.186:18090/#/task/task-detail/10000218http://10.0.0.186:18090/#/task/task-detail/10000217http://10.0.0.186:18090/#/task/task-detail/10000216跳转的时候，须要把taskId传过来，而后详情页面能力依据taskId申请接口，获取工作的详情
好了，晓得需要了，利用动静路由匹配咱们应该怎么做呢？
在src/index.js外面配置路由：
const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '/task-detail/:taskId', name: 'taskDetail', component: () => import('../views/task-detail.vue') }, ...errorRoutes]在src/App.vue里配置路由：
<router-link to="/task-detail/10000218">工作详情10000218</router-link><router-link to="/task-detail/10000217">工作详情10000217</router-link><router-link to="/task-detail/10000216">工作详情10000216</router-link>新增src/views/task-detail.vue页面，来接管通过路由传递过去的值
<template> <section> {{$route.params.taskId}} </section></template>以上就是动静路由匹配的用法，点击跳转的时候，url是这样的：http://localhost:4000/#/task-detail/10000218
- 编程式导航
除了应用<router-link>创立a标签来定义导航链接，咱们还能够借助router的实例办法，通过编写代码来实现，并且能够传递参数，具体应该怎么做呢？
首先src/App.vue外面咱们把<router-link>这种形式改成如下形式：
<button @click="go_page('10000218')">工作详情10000218</button><button @click="go_page('10000217')">工作详情10000217</button><button @click="go_page('10000216')">工作详情10000216</button>这里咱们定义了一个go_page办法，同样也是在App.vue外面写：
export default { data () { return { } }, methods: { go_page (taskId) { this.$router.push({ path: '/task-detail', query: { taskId: taskId } }) } }}</script>而且方才在src/index.js外面配置的路由也要变一变了：
{ path: '/task-detail', name: 'taskDetail', component: () => import('../views/task-detail.vue')},在src/views/task-detail.vue页面获取传递过去的值，采纳的形式也不一样了：
<template> <section> {{$route.query.taskId}} </section></template>以上，就能够拿到由路由传递过去的值了，点击跳转的时候，url是这样的：http://localhost:4000/#/task-detail?taskId=10000218，通过这两个url，你发现了动静路由匹配和编程式导航的区别了吗？
如果不想在url裸露参数进去，go_page办法也能够这样写：
export default { data () { return { } }, methods: { go_page (taskId) { this.$router.push({ name: 'task-detail', // 这里只能采纳路由的别名，不能应用path: '/task-detail' params: { taskId: taskId } }) } }}</script>在src/views/task-detail.vue页面获取传递过去的值
<template> <section> {{$route.params.taskId}} </section></template>然而这种形式也有弊病，当你在http://localhost:4000/#/task-detail路由下刷新这个页面的时候，传递的参数就没了
- 嵌套路由匹配
我借用vue-router官网的例子来阐明：理论的我的项目往往都是由多层嵌套的组件组合而成，同样，url中各段动静门路也按某种构造对应嵌套的各层组件：
/product/ele_product/phone /product/ele_product/computer+------------------+ +-----------------+| product | | product || +--------------+ | | +-------------+ || | ele_product | | +------------> | | ele_product | || | +---------+ | | | | +---------+ | || | | phone | | | | | |computer | | || | | | | | | | | | | || | +---------+ | | | | +---------+ | || +--------------+ | | +-------------+ |+------------------+ +-----------------+比方一个商城的我的项目，产品-电子产品-手机，产品-电子产品-电脑，像这种三级的嵌套页面，那么应该怎么写嵌套路由呢？接下来咱们一步步实现：
首先咱们
首先先把这四个页面新建进去：
在src/views文件夹下新建product文件夹，同时新增index.vue，ele-product.vue，phone.vue和computer.vue这四个文件
index.vue
<template> <section> <h3>这是产品页</h3> <router-view/> </section></template>ele-product.vue
<template> <section> <h3>我是电子产品页</h3> <router-view/> </section></template>phone.vue
<template> <section> <h3>我是手机页</h3> </section></template>computer.vue
<template> <section> <h3>我是电脑页</h3> </section></template>同时须要在src/index.js外面配置咱们的嵌套路由：
const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '/task-detail', name: 'taskDetail', component: () => import('../views/task-detail.vue') }, { path: '/product', name: 'product', component: () => import('../views/product/index.vue'), children: [ { path: 'ele-product', // 子路由须要后面加'/'，只有副路由才有 name: 'ele-product', component: () => import('../views/product/ele-product.vue'), children: [ { path: 'phone', // 子路由须要后面加'/'，只有副路由才有 name: 'phone', component: () => import('../views/product/phone.vue'), }, { path: 'computer', // 子路由须要后面加'/'，只有副路由才有 name: 'computer', component: () => import('../views/product/computer.vue'), } ] } ] }, ...errorRoutes]接下来在src/App.vue页面，依据路由拜访这几个页面：
<router-link to="/product">产品</router-link><br><router-link to="/product/ele-product">电子产品</router-link><br><router-link to="/product/ele-product/phone">手机</router-link><router-link to="/product/ele-product/computer">电脑</router-link>这里你会发现，index.vue和ele-product.vue页面都有<router-view/>这个标签，因为和App.vue页面一样，它们都是父页面，App.vue是根页面，是我的项目中所有页面的父页面，而index.vue是ele-product.vue页面的父页面，ele-product.vue是phone.vue和computer.vue的父页面，只有这个页面是父页面就须要增加<router-view/>标签
- 命名路由
在src/index.js文件里，在配置路由的时候，每个路由对象上都加了一个name属性，为啥子加呢，相当于给这个路由起了一个名字，所以有了命名路由的叫法，有什么用呢？还真有用途，下面咱们在用<router-link>做路由跳转时，是怎么写的呢？
<router-link to="/product/ele-product/computer">电脑</router-link>咱们也能够用命名路由来进行路由跳转：
<router-link :to="{name: 'computer'}">电脑</router-link>这样写也起到了雷同的成果，而且不必写那么一大串长的路由，是不是很不便呢？这里提一下哦，给路由命名的时候，不能存在两个name雷同的路由，name具备唯一性，在配置路由的时候看一下千万别整成多个路由都叫某一个name哦
- 命名视图
下面咱们提到过，只有一个页面它是父页面，那么外面就要增加一个<router-view/>标签，然而如果想在这个父页面显示多个视图，而且让不同的视图显示在指定地位，OK，就要用到命名视图了
还拿下面的产品-电子产品-手机这个嵌套页面说事儿，当进入了手机这个页面，咱们又分很多手机品牌，比方要在phone.vue这个页面别离展现华为专场，苹果专场，小米专场，vivo专场，怎么做呢？
在src/views/product文件夹下新增apple.vue，mi.vue，vivo.vue这三个文件，同时批改phone.vue这个页面的内容，让它作为华为专场的页面展现：
phone.vue
<template> <section> <h3>华为专场</h3> </section></template>apple.vue
<template> <section> <h3>苹果专场</h3> </section></template>mi.vue
<template> <section> <h3>小米专场</h3> </section></template>vivo.vue
<template> <section> <h3>vivo专场</h3> </section></template>并且找到它的父页面ele-product.vue页面，批改如下：
<template> <section> <h3>我是电子产品页</h3> <router-view/> <router-view name="apple"/> <router-view name="mi"/> <router-view name="vivo"/> </section></template>批改src/router/index.js里的路由配置：
{ path: '/product', name: 'product', component: () => import('../views/product/index.vue'), children: [ { path: 'ele-product', // 子路由须要后面加'/'，只有副路由才有 name: 'ele-product', component: () => import('../views/product/ele-product.vue'), children: [ { path: 'phone', // 子路由须要后面加'/'，只有副路由才有 name: 'phone', components: { default: () => import('../views/product/phone.vue'), apple: () => import('../views/product/apple.vue'), mi: () => import('../views/product/mi.vue'), vivo: () => import('../views/product/vivo.vue'), }, }, { path: 'computer', // 子路由须要后面加'/'，只有副路由才有 name: 'computer', component: () => import('../views/product/computer.vue'), } ] } ]},实现上述操作，当你要拜访http://localhost:4000/#/product/ele-product/phone时，就能够看到页面加载了多个专场视图
- 重定向
这个重定向就是帮忙咱们将以后路由指向另外一个路由，在做治理类我的项目（左侧导航栏，右侧视图的我的项目）的时候，咱们就须要用到重定向
{ path: '/web-task', component: Layout, redirect: '/web-task/task-list', name: 'web-task', meta: { title: '拨测工作治理', }, children: [ { path: 'task-list', component: resolve => require(['@/views/web-task/task-list.vue'], resolve), name: 'task-list', meta: { title: '拨测工作列表', }, }, ]}当点击拨测工作治理时，就间接跳转到拨测工作列表页面，之所以能重定向，就是redirect在起作用，它的值能够是字符串，也能够是个对象或则办法
// 字符串{ redirect: '/web-task/task-list'}// 对象{ redirect: { name: 'task-list' }}// 办法{ redirect: to => { return { name: 'task-list' } }}