1.安装
使用npm在工程中安装vue-router
npm install vue-router --save
2.配置
在src目录下新建router目录，在目录中新建index.js
其中声明路由配置
import Vue from 'vue'
import Router from 'vue-router'
import house_list from '@/components/house_list.vue'
import house_detail from '@/components/house_detail.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'house_list',
component: house_list
},
{
path: '/detail',
name: 'house_detail',
component: house_detail
}
]
})
3.使用
在main.js中加载vue-router
import router from './router/index.js'
在vue实例中使用router
new Vue({
render: h => h(first),
router
}).$mount('#app')
使用<router-view></router-view>表示此处使用路由指定的页面
<template>
<div id="first">
<navi></navi>
<router-view></router-view>
</div>
</template>
<navi>是一个导航组件，其中定义了导航菜单
<template>
<div class="banner">
<div class="logo">Anjoke</div>
<div class="navigator">
<ul>
<li>
<router-link to="/">首页</router-link>
</li>
<li>
<router-link to="/detail">详细</router-link>
</li>
</ul>
</div>
</div>
</template>
其中<router-link to="/">会被解析为一个超链接，表示vue-router指向的路径
4.路由传参
现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。
<router-link :to="{name:'aaa',params:{id:hid}}">跳转</router-link>
4.1 方案一
在index.js的router配置中,要在path中添加/:hid来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。此方式类似于restful风格的url，个人推荐使用
{
path: '/describe/:hid',
name: 'demo',
component: xxxx组件
}
- 普通超链接或者按钮
<button @click="getDescribe(hid)">
function getDescribe(id) {
this.$router.push({
path: `/describe/${hid}`,
})
｝
- router-link
<router-link :to="{name:'demo',params:{hid:hid}}">跳转</router-link>
子组件中通过以下代码获取
this.$route.params.hid
4.2 方案二
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。对应路由配置: 这里可以添加:/id 也可以不添加，不添加数据会在url后面显示，不添加数据就不会显示。如果不添加：id数据会在刷新的时候消失。此方式类似post方式，可以不在url上显示传输数据，但页面刷新可能造成数据丢失
index.js中关于router的配置
{
path: '/describe',
name: 'demo',
component: xxxx组件
}
超链接或普通按钮
function getDescribe(id) {
this.$router.push({
name: 'demo',
params: {
hid: hid
}
})
｝
子组件中通过以下代码获取
this.$route.params.hid
4.3 方案三
用path来匹配路由，然后通过query来传递参数这种情况下 query传递的参数会显示在url后面?id=？
index.js中关于router的配置。此方式类似get方式的url传值形式
{
path: '/describe',
name: 'demo',
component: xxxx组件
}
超链接或普通按钮
function getDescribe(id) {
this.$router.push({
name: 'demo',
query: {
id: id
}
})
｝
子组件中通过以下代码获取
this.$route.query.id
5.路由守卫
5.1 全局守卫
所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查。
全局路由守卫有个两个，一般定义在main.js中：
- 全局前置守卫
router.beforeEach((to, from, next) => {
console.log(to) => // 到哪个页面去
console.log(from) => // 从哪个页面来
next() => // 一个回调函数
}
- 全局后置守卫
router.afterEach（to，from） = {}
next()：回调函数参数配置
- next()： 继续当前的导航
- next(false): 中断当前的导航。
如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址 - next('/') : 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
- next({ path: '/' }): 当前的导航被中断，然后进行一个新的导航。
可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项
5.2 组件路由守卫
跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
- 在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
beforeRouteEnter (to, from, next) {
next(vm => {})
}
- 同一页面，刷新不同数据时调用，
beforeRouteUpdate (to, from, next)
}
- 离开当前路由页面时调用
beforeRouteLeave (to, from, next) {
}
5.3 独享守卫
路由独享守卫是在路由配置页面单独给路由配置的一个守卫
export default new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: 'Home',
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
