一、什么是路由?

Vue Router 是?Vue.js?的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

? ?相关名词：

路由：route??????? 一组key-v的对应关系(路径的改变对应的组件进行切换)
路由器：router? ??多个路由需要路由器管理
为了实现单页面应用(SPA)

? ?功能包括：

嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue.js 的过渡系统提供的过渡效果
细致的导航控制
自动激活 CSS 类的链接
HTML5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码

二、路由的安装与使用

1.安装

npm i vue-router@3?? 安装3版本

在src根目录创建router目录，在目录中创建index.js，代码如下：

import Vue from 'vue';
//导入vue-router
import VueRouter from 'vue-router'

//应用插件
Vue.use(VueRouter)

//创建router规则对象
const routes = [
	
]
//创建router
const router = new VueRouter({
	routes
})

//导出router
export default router

2.main.js 中进行挂载

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

import router from './router'
new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

3.创建路由组件

在 src 根目录下创建文件夹 pages

? ?说明：

路由组件 pages
一般组件 components
路由组件多了两个属性：$route? ?$router

? ?路由规则相关书写方法：

// 引入vue
import Vue from 'vue';
// 导入 vue-router
import VueRouter from 'vue-router';

// 导入组件
import About from '../pages/About';
import ContactUs from '../pages/ContactUs';

import Persons from '../pages/Persons';

import Show from '../pages/Show'
// 应用插件
Vue.use(VueRouter);

// 创建router规则对象
const routes =[
{
    path:'/about',
    component: About
},
{
    path:'/contactus',
    component: ContactUs
},
{
    path:'/persons/:id/:realname',
    component:Persons,
    children:[
        {
            path:'show',
            component:Show
        }
    ]
}
]

// 创建router
const router = new VueRouter({
    routes,
})

// 导出router
export default router

? 使用路由??

该标签是一个vue-router中已经内置的组件，他会被渲染成一个<a>标签。

<router-link to="/about" active-class="hover">关于我们</router-link>

该标签会根据当前的路径，动态渲染出不同的组件，也就是组件的一个占位符。

<router-view></router-view>

? ?router-link属性：

to：用于指定跳转的路径。
tag：tag可以指定<router-link>之后渲染成什么组件。
replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中。
active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。

? ?mode属性??

hash模式：vue的路由默认是hash模式，地址栏后面会带一个#号。
history模式：mode=”history”/

区别：

1：hash ?兼容性好，history旧版本浏览器不兼容

2：hash? 带的#不会发送给服务器，history会发送给服务器，程序部署上线时需要后端人员支持，解决404刷新问题。配置一下apache或是nginx的url重定向，重定向到你的首页路由上。

? ?默认路径——也就是页面默认显示的内容??

{

??????? ? path: '/',

??????? ? redirect: '/about'

},

三、路由的传参

1.params的类型

在路由规则中配置路由格式：/router/:id/:title（动态路由）

设置props为true，接收数据

地址栏显示样式 ——? /xxx/xxx/1/张三

模板代码示例代码:

<router-link :to="`/message/show/${item.id}`">{{item.realname}}</router-link>

? 路由的props配置??

第一种：props:{id:10,title:'ttt'}
第二种：props:true? 该路由的params的参数，传递到该组件的props身上
第三种值为函数(下方query参数在演示)

props($route){

? return {id:$route.query.id,title:$route.query.title}

}

2.Query参数的类型

? ?字符串形式：

<li v-for="item in res">

<router-link :to="`/about/news/show?id=${item.id}&title=${item.title}`">{{item.title}}</router-link>

</li>

? ? 参数接收：

 methods:{
        id( ){
            return $route.query.id;
        },
        title( ){
            reutrn $route.query.title;
        }
    }

3.路由name

作用——简化路由的跳转，路由较长的使用名称

上述query跳转推荐如下写法：
<router-link? :to="{name:'show',
query:{id:item.id,title:item.realname}}">{{item.realname}}
</router-link>

?四、编程式路由

当不是a标签时候，需要js代码进行跳转，我们就采用编程式路由。两种方式：replace和push。

1：字符串形式

this.$router.push(`/message/show/${item.id}/${item.realname}`);

2：对象形式

this.$router.push({

??????? ??????? ??????? ??????? ??????? name:'show',

??????? ??????? ??????? ??????? ??????? params:{

??????? ??????? ??????? ??????? ??????? ??????? id:item.id,

??????? ??????? ??????? ??????? ??????? ??????? title:item.title

??????? ??????? ??????? ??????? ??????? }

})

3：this.$router.back();//后退

??????? this.$router.forward();? //前进

??????? this.$router.go();?? //参数可以为数字，指定跳转到指定的页面中

五、缓存路由组件

作用——让组件不销毁，保持活跃。

相关参数：

Include 如果不写让所有组件保持活跃不销毁。

多个组件使用数组，:include=”[‘组件1’,’组件2’]”

<keep-alive include=”组件名称”>
     <router-view></router-view>
</keep-alive>

路由的两个钩子函数：

//组件切换进来（组件显示状态）

activated() {

??????? ??????? ??????? this.myinter =? setInterval(()=>{

??????? ??????? ??????? ??????? ??????? console.log(1)

??????? ??????? ??????? ??????? },100);

},

//组件切换出去（后台显示）

deactivated() {

??????? ??????? ??????? clearInterval(this.myinter);

}

六、路由守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

1.1?前置守卫

即对整个单页应用（SPA）中的所有路由都生效，初始化时执行、每次路由切换前执行。

代码：

//前置路由守卫

router.beforeEach((to,from,next)=>{

??????? // console.log(to);

??????? // console.log(from);

??????? if(to.name=="news" || to.name=="dt"){

??????? ??????? if(localStorage.getItem("token")=="zs"){

??????? ??????? ??????? next();

??????? ??????? }

??????? }else{

??????? ??????? next();

??????? }

})