共计 7596 个字符，预计需要花费 19 分钟才能阅读完成。
接着上一节讲，根本框架曾经搭建实现，接下来最重要的就是我的项目里路由配置了，它治理着页面间的跳转，咱们做前端我的项目，基本上步骤就是：搭建前端框架 – 配置我的项目路由 – 开发具体页面，依照这一步骤，咱们来具体解说一下 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/10000218
http://10.0.0.186:18090/#/task/task-detail/10000217
http://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'}
}
}