vue Router的学习（一）
路由
route路由 就是一组key-value的对应关系
router路由器 多个路由需要经过路由器的管理
vue-router插件库 专门用来实现SPA (单页面程序)应用
对SPA 应用的理解
- ? 单页面web应用
- 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
- 数据需要通过ajax请求获取
路由的理解
? 一个路由就是一组映射关系
? key为路径，value为component用于展示页面内容
? 工作过程：当浏览器的路径改变时，对应的组件就会显示
基本使用
1.安装vue-router
$npm install vue-router
2.在main.js 引入vue-router 并且使用插件Vue.use(vueRouter)
import vueRouter from 'vue-router'
Vue.use(vueRouter)
3.创建一个管理路由的文件 例如目前创建在router文件夹下的index.js文件
- 在文件中引入vue-router插件
- 并且引入components文件下的子组件
- 创建router实例对象，去管理我们的对应关系
- 最后默认导出router实例
import vueRouter from 'vue-router'
import Home from '../components/Home'
import About from '../components/About'
const router=new vueRouter({
routes:[
{
path:'/home',
component:Home
},
{
path:'/about',
component:About
},
]
});
export default router;
4.使用路由在我们的组件组长App.vue中进行组件间的切换
? 具体实现路由的切换是使用
<router-link to='/about'>About</router-link>
其中使用 一下标签可以指定显示位置
<router-view></router-view>
完整代码如下：
<template>
<div id="app">
<!-- <a href="#"> Home</a>
<a href="#">About</a> -->
<!-- 用于路径跳转 -->
<router-link to="/home" >Home</router-link>
<router-link to="/about"> About</router-link>
<!-- 容器 告诉vue通过路径拿到的组件放到哪里去 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
嵌套路由
多级路由
可在router index.js下的对应组件路由配置中添加children数组，里面可以添加子路由完成嵌套路由
实例中在Home.vue组件里嵌套详情details.vue:
routes: [
{
path: '/home',
component: Home,
children: [
{
path: 'message',
component: Message,
children: [
{
path: 'details',
component: Details
}
]
},
{
path: 'news',
component: News
}
]
},
]
在home页面跳转时要写完整路径
<router-link to="/home/message">消息</router-link>
路由传参
跳转并携带query参数，to用拼接字符串形式传参
<router-link :to="'/home/message/details?id='+m.id">查看详情</router-link>
跳转并携带query参数，to用对象形式传参
<router-link :to="{
path: '/home/message/details',
query: {
id: m.id,
title: m.title,
},
}">
查看详情</router-link>
接收参数
$router.query.id
命名路由
给路由命名可以简化路由的跳转
使用：
1.给路由命名
{ name:'about', path:'/about', component:About}
2.简化跳转
<router-link :to="{ name:'about', //完整路径 query: {//携带的query参数，最终query中的东西，还是会以？id=+this.id拼接方式传递 id: 123 }, }">跳转到About组件</router-link>
路由的params参数
在配置路由的时候，使用占位符
{ name: 'details',
声明接受params参数
编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现
-
标签是声明式导航 -
router.push( …) 是编程式导航
router.push 方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL
<template> <div class="about"> <h2>我是About组件</h2> //声明式导航 //编程式导航 <span @click="toHome">跳转Home</span>| <span @click="messageHandler">跳转message</span> <span @click="forwardHandler">前进一步</span>| <span @click="backHandler">后退一步</span>| <span @click="goHandler">去</span> </div></template><script>export default { name: "About", methods: { </script><style scoped></style>
注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：
const userId = '123'router.push({ name: 'user', params: { userId }})
重定向和别名
通过redirect属性将组件跳转路径进行重新定位
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ]})
路由的模式 hash history
vue-router 默认 hash 模式 —— 使? URL 的 hash 来模拟?个完整的 URL，于是当 URL 改变时，??不会重新加载。如果不想要很丑的 hash，可以?路由的 history 模式。
可以通过mode属性进行模式的设置
const router = new VueRouter({ mode:history})
两种模式的区别：
? hash模式的url显示链接会默认添加#在根目录后
? history模式是以正常的url进行显示
路由守卫
作用：对路由进行权限控制 鉴定权限
全局守卫
分成两个阶段
? 1.全局前置守卫，初始化时执行、每次切换路径时执行
? 2.全局后置守卫，初始化执行、每次路经切换后执行
独享守卫
{
name: 'message',
path: 'message',
component: Message,
beforeEnter:(to,from,next)=>{
console.log('我是message的独享守卫');
if (to.path === '/home/message') {
if (localStorage.getItem('school') === 'briup') {
next()
}else{
alert('你不是briup的学生')
}
} else {
next()
}
},
组件内守卫
一般有三个阶段
最后，你可以在路由组件内直接定义以下路由导航守卫：
beforeRouteEnter(to, from, next) {
next(vm => {
})
},
beforeRouteUpdate(to, from, next) {
this.name = to.params.name
next()
},
beforeRouteLeave(to, from, next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
记住参数或查询的改变并不会触发进入/离开的导航守卫
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave 守卫。 - 调用全局的
beforeEach 守卫。 - 在重用的组件里调用
beforeRouteUpdate 守卫 (2.2+)。 - 在路由配置里调用
beforeEnter。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter。 - 调用全局的
beforeResolve 守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach 钩子。 - 触发 DOM 更新。
- 调用
beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
|