## 路由
1. 理解: 一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。
2. 前端路由:key是路径,value是组件。
### 1.基本使用
1. 安装vue-router,命令:```npm i vue-router```
2. 应用插件:```Vue.use(VueRouter)```
3. 编写router配置项:
```js
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象,去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露router
export default router
```
4. 实现切换(active-class可配置高亮样式)
```vue
<router-link active-class="active" to="/about">About</router-link>
```
5. 指定展示位置
```vue
<router-view></router-view>
```
路由基本使用
我们先写个大框,样式是用的bootstrap,大家可以用别的或者不写。
我们的路由器已经就位了,我们就要想办法去使用我们的路由器:
路由的几个注意点
这里还是用之前的代码先放上来:
### 2.几个注意点
1. 路由组件通常存放在```pages```文件夹,一般组件通常存放在```components```文件夹。
2. 通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。
3. 每个组件都有自己的```$route```属性,里面存储着自己的路由信息。
4. 整个应用只有一个router,可以通过组件的```$router```属性获取到。
我们写成对象形式,看起来比较清晰。
### 5.命名路由
1. 作用:可以简化路由的跳转。
2. 如何使用
1. 给路由命名: ```js { path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:'welcome', component:Hello, } ] } ] }
``` 2. 简化跳转: ```vue <!--简化前,需要写完整的路径 --> <router-link to="/demo/test/welcome">跳转</router-link> <!--简化后,直接通过名字跳转 --> <router-link :to="{name:'hello'}">跳转</router-link> <!--简化写法配合传递参数 --> <router-link :to="{ name:'hello', query:{ id:666, title:'你好' } }" >跳转</router-link> ```
结构赋值
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
// props:{a:900}
//第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件
// props:true
//第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
props(route){
return {
id:route.query.id,
title:route.query.title
}
}
}
```
### 8.```<router-link>```的replace属性
1. 作用:控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式:分别为```push```和```replace```,```push```是追加历史记录,```replace```是替换当前记录。路由跳转时候默认为```push```
3. 如何开启```replace```模式:```<router-link replace .......>News</router-link>```
126.编程式路由导航:
编程式路由导航
我们这部分就是我们仍然想做路由跳转,但是我们还不想使用router-link,为什么有这样的需求呢,是因为我们之前使用router-link都是使用a标签跳转的,我们现在想使用button按钮,这时候就不能再使用router-link了。
先把之前的代码放上来,之后我就不放完整截图了,只放修改的部分:
我们有了button按钮,就可以去引入我们的编程式路由导航了。
然后我们去给这些按钮添加点击事件:
我们的方法中参数传入遍历中的m,因为没在一个区域无法直接使用,然后我们使用router路由器的push方法就可以了。里面的内容和之前router-link中的没区别。
其他资料:
前端路由vue-router
六、vue-router打包文件的解析
3、嵌套路由代码实例
(1)index.js
// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')
// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)
// 2.创建VueRouter对象
const routes = [
{
path: '',
// redirect重定向
redirect: '/home'
},
{
path: '/home',
component: Home,
meta: {
title: '首页'
},
children: [
{
path: 'news',
component: HomeNews
},
{
path: 'message',
component: HomeMessage
}
]
}
]
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes,
mode: 'history',
linkActiveClass: 'active'
})
// 3.将router对象传入到Vue实例
export default router
(2)Home.vue
<template>
<div>
<h2>我是首页</h2>
<p>我是首页内容, 哈哈哈</p>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>
<h2>{{message}}</h2>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
message: '你好啊',
path: '/home/news'
}
}
}
</script>
<style scoped>
</style>
(3)HomeNews.vue
<template>
<div>
<ul>
<li>美女1</li>
<li>美女2</li>
<li>美女3</li>
<li>美女4</li>
</ul>
</div>
</template>
<script>
export default {
name: "HomeNews"
}
</script>
<style scoped>
</style>
九、vue-router参数传递 ![](https://i-blog.csdnimg.cn/blog_migrate/cc4493af4b24977a0094d6077866de90.png)
十一、keep-alive与vue-router
keep-alive是vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的试图组件都会被缓存。
总结: 通过
<a>
链接改变了地址栏中的hash
,然后通过监听hash
值的变化,显示对应的组件
当如果很多个都要进行导航守卫时可以使用如下做法:
// 全局前置守卫
router.beforeEach((to, from, next) => {
// 要进行导航守卫的路径值
const pathArr = ['/home','/home/users', '/home/rights']
if (pathArr.indexOf(to.path) !== -1) {
const token = localStorage.getItem('token')
if (token) {
next()
} else {
next('/login')
}
} else {
next()
}
})
还有一种写法就是给每一个路由添加 meta
配置项,通过meta里的真假值来判断是否需要进行判断
{
path: 'users',
component: Users,
meta: { isAuth: true },
},
...
// 全局前置守卫
router.beforeEach((to, from, next) => {
if (to.meta.isAuth) { // 判断是否需要进行导航守卫
const token = localStorage.getItem('token')
if (token) {
next()
} else {
next('/login')
}
} else {
next()
}
})