vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式来实现，根据mode参数来决定采用哪一种方式，本章主要讲解Hash模式的使用。
一.路由配置
1.定义路由和路由组件
先导入vue和vue-router，接着调用 Vue.use(Router)，并引入路由组件，设置好路由组件对应的路径。(配置参考如下)
//在 src 的 router 目录下 index.js 文件中
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home' //路由组件
Vue.use(Router)
export default new Router({ //设置路由路径&导出
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
2.路由导入和路由挂载
接着在 main.js 文件中导入路由模块，并挂载到根实例上
// 在 src 目录下的 main.js 文件中
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router, //挂载路由
render: h => h(App)
})
3.路由输出
最后，通过vue原生提供的 router-view 组件，将路由匹配的组件进行输出
<template>
<div id="app">
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
二.路由跳转的两种方式
在vue中，路由跳转不是以传统的a标签来进行实现，主要有以下两种方式。
- 声明式跳转：使用 <router-link> 创建 a 标签来定义导航链接，进行路由跳转
<div id="app">
<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>
<!-- 如过设置了命名路由，可以直接写路由名称 -->
<router-link to="foo">Go to Foo</router-link>
<router-link to="bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
- 编程式跳转：借助 router 的实例方法，通过编写代码来实现路由跳转
<button @click="goToMenu" class="btn btn-success">Let's order！</button>
.....
<script>
export default{
methods:{
goToMenu(){
this.$router.go(-1)//跳转到上一次浏览的页面
this.$router.replace('/menu')//跳转指定的路由地址
this.$router.replace({name:'menuLink'})// 跳转指定路由名字下
this.$router.push('/menu')通过push跳转指定的路由路径
this.$router.push({name:'menuLink'})通过push跳转到指定路由名字下
}
}
}
</script>
三.路由传参常用的2种方法
vue传参方式有：query+静态路由传参 和 params+动态路由传参 两种。（还有一种 props 方法，此处不做介绍，具体请查看官方文档）
先说下两则的区别：
- query通过path切换路由，params通过name切换路由
// query通过path切换路由
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>
// params通过name切换路由
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>
- 接收参数的方式不同
// query通过this.$route.query接收参数
created () {
const id = this.$route.query.id;
}
// params通过this.$route.params来接收参数
created () {
const id = this.$route.params.id;
}
对动态路由配置还不熟悉的同学，可以点击这里移步动态路由配置参考
四.路由懒加载
路由懒加载能够提高页面的加载速度，不过使用也得看场合。有时候需要懒加载，提升首页加载速度，一般是页面层级较为复杂的时候。
- 非懒加载的写法
// 非懒加载的写法
import Index from '@/page/index/index';
export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: Index
}
]
})
- 懒加载的写法
//懒加载的写法
export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: resolve => require(['@/page/index/index'], resolve)
//或则
component: () => import('@/pages/home/home')
}
]
})
五.路由重定向和别名
重定向
它有三种写法，直接上代码。（具体想用那种，因人而异）
// 1.静态路径写法
export default new Router({
routes: [
{ path: '/a', redirect: '/b' }
]
})
// 2.命名路由写法
export default new Router({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
// 3.函数写法
export default new Router({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
在这里主要想说下它的使用场景，通常用于404页面的设置，如下所示。
export default new Router({
routes: [
{ path: '*', component:Error }
]
})
【注意】这里的path：' * ' ，表示输入地址不匹配时，自动显示出Error.vue的文件内容。
别名
直接上代码，这个就不做多介绍了。
export default new Router({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
六：路由嵌套
实际生活中的应用界面，通常由多层嵌套的组件组合而成。因此有的时候我们需要对路由进行嵌套，以便更好的展示内容。（以下是一个简单嵌套的例子）
- 设置对应路由跳转路径
<!-- home.vue文件 -->
<template>
<div>
<p>home页面</p>
<router-link to="/list/more">more</router-link>
<router-link to="/list/much">much</router-link>
<router-view></router-view>
</div>
</template>
- 引入子组件，并设置子组件各自的路由
// router目录下的 index.js文件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import More from '@/components/More'
import Much from '@/components/Much'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home,
children:[
{path: 'more', component: More},
{path: 'much', component: Much}
]
}
]
})
七.命名视图
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。
1.在home.vue文件中，设置输出路由，用属性 name 来进行命名不同路由。
<!-- home.vue文件 -->
<template>
<div id="app">
<router-view></router-view>
<router-view name="Header"></router-view>
<router-view name="Main"></router-view>
</div>
</template>
- 引入组件，并在components(注意这里是s结尾)中注册组件
// router目录下的 index.js文件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Header from '@/components/Header'
import Main from '@/components/Main'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
components: {
default: Home,
Header,
Main
}
}
]
})
值得注意的一点是，在命名视图中，还可以进行路由的嵌套，对于处理复杂度高的页面可以作为参考，贴上官方文档地址，感兴趣的可以看看。
