@TOCVue 路由 vue-router
1 安装vue-router
npm i vue-router -s
2 创建路由模块
// src/router/index.js就是当前项目的路由模块
// 1 导入Vue 和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入路由要用到的组件
import Home from '../components/Home.vue'
import Movie from '../components/Movie.vue'
import About from '../components/About.vue'
// 2 调用vue.use()函数，把VueRouter安装为vue插件
Vue.use(VueRouter)
// 3 创建路由的实例对象
const router = new VueRouter({
// 定义数组routes[],对应哈希地址与组件之间的关系
routes: [
//路由规则
{ path: '/home', component: Home },
{ path: '/movie', component: Movie },
{
path: '/about',
component: About,
// about组件里的嵌套路由
children: [
{ path: 'tab1', component: Tab1 },
{ path: 'tab2', component: Tab2 }
]
},
// 路由重定向：强制跳转
{ path: '/', redirect: '/home' }
]
})
// 4 向外共享路由的实例对象
export default router
3 在main.js导入路由模块
// 1 导入路由模块，拿到路由实例
import router from '../src/router/index.js'
new Vue({
render: h => h(App),
// 2 挂载路由
router: router
}).$mount('#app')
4 在App.vue中使用router-view占位符
<template>
<div class="app-container">
<h1>App2 组件</h1>
//使用router-link替代a链接
// <a href="#/home">首页</a>
// <a href="#/movie">电影</a>
// <a href="#/about">关于</a>
<hr />
<router-view ></router-view>
</div>
</template>
5 动态路由
5.1 定义：把hash地址可变的部分定义为参数项，提高路由规则的可复用性
5.2 在vue-router中使用英文的冒号定义参数项:id
5.3 在组件中使用$route.prams.id进行调用
//Movie组件
<template>
<div class="movie-container">
<h3>Movie 组件---{{$route.params.id}}</h3>
<hr>
<button @click="showThis">打印this</button>
</div>
</template>
注意1：在hash地址中，/后面的参数叫做“路径参数”
在路由“参数对象”$route中，需要使用$route.prams来访问路径参数
注意2 在hash地址中，“？”后面的参数叫做“查询参数”
在路由“参数对象”中， 需要使用$route.query来访问查询参数
注意3 在hash地址中，path只是路径部分，fullPath才是完整路径
例如
" /movie/1?name=%27as%27 " 是fullPath
" /movie/1" 是path
6 声明式导航VS编程式导航
6.1 声明式导航：通过a链接或router-link点击的跳转
6.2 编程式导航：通过location.href的跳转
6.3 vue-router提供的编程式导航API
6.3.1 跳转到指定hash地址，并增加一条历史记录
this.$router.push（‘hash地址’）
6.3.2 跳转到指定hash地址，并替换掉当前的历史记录
this.$router.replace（‘hash地址’）
6.3.3 在浏览历史中前进或后退
this.$router.go（数值n）
在实际操作中一般只前进或者后退一层，vue-router简化：
6.3.3.1前进
this.$router.forward()
6.3.3.2 后退
this.$router.back()
7 导航守卫
7.1 导航守卫可以控制路由的访问权限
7.2 全局前置守卫：每次发生路由的导航跳转时，都会触发全局前置守卫，可以对每个路由进行访问权限的控制
7.2.1 全局前置导航守卫回调函数的3个形参
