什么是路由？
网络页面与页面跳转，实现的都是 <a> 标签，<a> 标签里面有属性href，给它定义一个网络地址或者路径的话，它就会帮助你跳转到另外一个页面去。Vue中的路由和我们 <a> 标签实现的功能是一样的，我们也是实现的一个对应的跳转，只不过路由的这个性能优化的比较好，你点击 <a> 标签的时候，不管你点击多少次，它都会发送一个对应的网络请求，也就是说你的这个页面是会不断地刷新的，也就是说页面会有很多请求。但是路由不一样，只要你点击之后，不会发送请求和页面的刷新，直接就会跳转到它要去的一个位置，它是路由的一个好处。
路由：我的理解是，url的变化。
vue-router中有<router-view>的模板标签，那么url切换，可以相应地切换<router-view>的内容。
官方文档：
https://router.vuejs.org/zh-cn/essentials/getting-started.html
好的博客：
http://www.cnblogs.com/keepfool/p/5690366.html
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
示例：
1）单页面应用：
https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_01.html#!/home
https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_01.html#!/about
我们切换，可以看到页面很像没有切换一样，只是上面的:
url的`#!/home`和`#!/about`在切换。
页面的两个组件在切换（Home组件和About组件）。
vue-router安装
- 直接下载和CDN
https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag。
在 Vue 后面加载 vue-router，它会自动安装的：
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
- NPM 安装
npm install vue-router --save-dev
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
如果使用全局的 script 标签，则无须如此（手动安装）。
使用路由（vue-router）
1.在工程目录的根目录先安装：
npm install vue-router --save-dev
然后重启：
npm run dev
2.使用vue-router：
在main.js文件中，引入和安装VueRouter：
Vue.use(plugin)是安装插件。只会安装一次。
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3.配置Vue路由：
const router = new VueRouter({
routes: [ # 注意：这里是routes，不是routers
{path: "/", component:Home},
{path: "/helloworld", component:HelloWorld},
]
})
4.使用路由：
new Vue({
router, // 这里来使用
el: '#app',
render: h => h(App),
5.在使用router的Vue实例或者组件的模板的根组件中配置<router-view>：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
1）在 <a> 标签上面使用 v-link 指令跳转到指定路径。
2）在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件。
开始
用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。下面是个基本例子：
一般使用方式：
我们可以在HTML中，或者javascript中跳转路由：
HTML例子
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
JavaScript例子
// Home.vue
export default {
computed: {
username () {
// 我们很快就会看到 `params` 是什么
return this.$route.params.username
}
},
methods: {
goBack () {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}
}
}
编程式导航
一般是传入一个对象，尽管可以传递一个字符串。
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123 (这里的name是route的name，一般与path写成一样)
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效，正确方式是上面的 { path: `/user/${userId}` }
router.push({ path: '/user', params: { userId }}) // -> /user (这里是错误的)
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
经验：
https://segmentfault.com/q/1010000013280618?_ea=3335275
需要使用到vue对象的 必然放在main.js 里 比如全局使用的插件 需要使用到Vue.use()
Vue.use(VueRouter) 之后，就可以向Vue实例放入router实例了。
<router-link>
tag属性：可以让<router-link>最终渲染为什么样的标签。
<router-link tag="div">，最终就是渲染为<div>，默认是一个<a>标签。
去掉URL中/#的方式, mode 设置为 history：
export default new VueRouter({
routes: [
{ path: '/recommend', component: Recommend },
{ path: '/singer', component: Singer },
{ path: '/rank', component: Rank },
{ path: '/search', component: Search },
],
mode: 'history'
})
2.路由的redirect：
/的时候，直接重定向到/recommend去：
export default new VueRouter({
routes: [
{ path: '/', redirect: '/recommend' },
{ path: '/recommend', component: Recommend },
{ path: '/singer', component: Singer },
{ path: '/rank', component: Rank },
{ path: '/search', component: Search },
],
mode: 'history'
})
1.将数据缓存
使用<keep-alive>将<router-view>缓存到内存中，切换将不会有多余的请求。
<template>
<div id="app">
<h1>Hello App</h1>
<m-header></m-header>
<tab></tab>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
2.路由就是根据里面的chilren来实现的多个页面的路由。
children嵌套children。
export const appRouter = [
{
path: '/user',
icon: 'social-buffer',
name: 'user',
title: '用户管理',
component: Main,
children: [
{
path: 'user-list',
icon: 'compose',
name: 'user-list',
title: '用户列表',
component: resolve => { require(['./views/user/user.vue'], resolve); }
},
{
path: 'user-level',
icon: 'compose',
name: 'user-level',
title: '用户级别设置',
component: resolve => { require(['./views/user/user-level.vue'], resolve); }
}
]
},
...
3.事件，函数中跳转路由：
https://segmentfault.com/q/1010000007648994/a-1020000007649210
函数中跳转，就可以避免<router-link>的展示。我们可以在<router-view>对应的component1中写函数式跳转到component2中。这个<router-view>可以包含component1和component2。
4.路由中有redirect:
可以默认到一个组件中去。
{
path: paths.forgetPassword,
name: '忘记密码',
meta: {
title: ''
},
redirect:paths.forgetPassword + '/' +paths.forgetPassword_chooseAccountType,
component: (resolve) => require(['./views/忘记密码/forget-pwd.vue'], resolve),
children: [
{
path: paths.forgetPassword_chooseAccountType,
name: '选择账户类型',
meta: {
title: ''
},
component:(resolve) => require(['./views/忘记密码/components/choose-account-type.vue'], resolve)
},
{
path: paths.forgetPassword_emailHasSent,
name: '邮件已经发送',
meta: {
title: ''
},
component:(resolve) => require(['./views/忘记密码/components/email_has_sent.vue'], resolve)
}
]
},
6.vue-router不展示出参数在url中的方式：
https://segmentfault.com/q/1010000014134094?_ea=3556096
7.router.push({ name: 'user', params: { userId }})与router.push({ name: 'user', params: { userId: userId }})是不是等价的？
答案：是等价的。
8.（很重要经验）
子路由children
案例：
const routers = [{
path: '/',
meta: {
title: ''
},
component: (resolve) => require(['./views/index.vue'], resolve),
children: [
{
path: 'a',
name: 'a',
title:'a',
component: (resolve) => require(['./views/a/a.vue'], resolve)
},
{
path: 'b',
name: 'b',
title:'b',
component: (resolve) => require(['./views/b/b.vue'], resolve),
children: [
{
path: 'c',
name: 'c',
title:'c',
component: (resolve) => require(['./views/b/ccc.vue'], resolve)
},
]
},
]
}];
我们看，/a,/b,/b/c这三个路径。
那么在index.vue中：
<div>
<router-view></router-view>
</div>
index.vue的<router-view只能跳转展示/a，和/b，上面的children/b/c是应该属于b组件中的<router-view>
我们的b.vue:
<div>
BBB
<router-view></router-view>
</div>
那么这里的<router-view>才能展示c.vue组件的内容。
可以参考：https://router.vuejs.org/zh-cn/essentials/nested-routes.html
什么是最顶层的出口？（上面的index.vue的<router-view>就是最顶层的出口, b.vue中的<router-view>就不是最顶层出口）。
9.定义路由，不管哪个层级的route，name都不可以相同：
{
path: 'a',
name: 'a', // name应该唯一
title:'a',
component: (resolve) => require(['./views/a/a.vue'], resolve)
},
否则在运行到要切换那里的路由的时候，这里会报错：
[vue-router] Duplicate named routes definition: { name: "b", path: "/b" }
- (很重要) 路由的redirect:
{
path: 'b',
name: 'b',
title:'b',
redirect: 'b/c', // 1.这里写/a/b/c就是: localhost:8080/a/b/c 2.写b/c就是在现在的相对路径b的路径上替换为相对路径 b/c
component: (resolve) => require(['./views/b/b.vue'], resolve),
children: [
// {
// path:'b',redirect:'c'
// },
{
path: 'c',
name: 'c',
title:'c',
component: (resolve) => require(['./views/b/ccc.vue'], resolve)
},
]
},
连接：https://segmentfault.com/q/1010000014350325?_ea=3610721 （见评论）
11.打开新的页面：
https://segmentfault.com/q/1010000006760108
12.router-link传值以及取值：
https://blog.csdn.net/sangjinchao/article/details/70888259
13.<router-link>传递参数：
<router-link :to="{path: '/DetailPage', query: {index: index}}">
<div class="item-img">
<p>路由<p>
</div>
</router-link>
