vue(路由)

## 路由

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参数传递        

十一、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()
    }
})