路由使用方法、路由封装、路由跳转传参及路由前置守卫

一、路由基本使用

1.下载 VueRouter 模块到当前工程，版本3.6.5，vue2用版本3，vue3用版本4

yarn add vue-router@3.6.5
npm install vue-router

2.main.js中引入VueRouter

import VueRouter from 'vue-router'

3.在main.js安装注册

Vue.use(VueRouter)//VueRouter插件初始化

4.main.js创建路由对象，配置路由规则

const router = new VueRouter({
	routes:[
      {path:'/xxx',component:xxxx},
      ....
	]
})

5.并且注入到Vue实例中

new Vue({
  render: h => h(App),
  router:router//可简写为router,如果不是router命名，就不能简写
}).$mount('#app')

• 页面中使用路由两个核心步骤：

1.创建需要的组件（views目录），配置路由规则
2.配置导航，配置路由出口（路径匹配的组件显示的位置）<router-view></router-view>

二、路由封装

如果全部写在main.js中，代码太多，不利用维护。那我们可以将路由单独封装放在‘src/router/index.js’文件里面，只需要再main.js中引入并注入就行了。
具体代码如下图：

三、router-link替代a标签实现高亮及自定义类名

//RouterLink会自动给当前的链接添加两个类名
// router-link-active: 激活的导航链接   模糊匹配,这个用的多
// router-link-exact-active:  激活的导航链接 精确匹配

  <router-link to="/home"></router-link>

// 可以修改默认高亮的类名
const router = new VueRouter({
  routes:[...],
  linkActiveClass: '类名1',
  linkExactActiveClass: '类名2',
  // route: 一条规则
}

四、路由跳转的两种方式和传参

1.声明式导航

（1）查询参数传参（适合传多个参数，&来链接传多个）

• to=“/path?参数名=值&参数名=值”（多个参数用&）
• 接收：$route.query.参数名
• 在created里面调接口传参，这里需要写this.$route.query拿到传参的值

<router-link to="/detail?id="item.id"&name="item.name""></router-link>
...
//接收
{{$route.query.id}}
....
created(){
	console.log(this.$route.query.id)	
}

（2）动态路由传参（优雅简洁，适合单个参数传参）

• 路由配置：path:‘/path/：参数名？’ （不加？，不传参就不生效，所以加一个？可选）
• 跳转：to=“/path/参数值”
• 接收：$route.params.参数名

const router = VueRouter({
  mode:'history',
  routes[
    {path:'/search/:id?',component:Search},
    ...
  ]
})
//跳转语法
<router-link to="/search/001"></router-link>
<router-link to="/search/002"></router-link>
//接收
{{ $route.params.id}}
....
created(){
	console.log(this.$route.params.id)	
}

2.编程式导航

如果是按钮如何进行路由跳转，可以会用编程式导航，用js来进行跳转
（1）path路径跳转（简易方便）

this.$router.push('/路由路径')
//完整写法，传参时需要
this.$router.push({
  path:'/路由路径'
})
//案例
<button @click="goSearch">按钮</button>
...
  goSearch(){
    this.$router.push('/search')
  }
//1.查询参数传参
this.$router.push('/路由路径?参数名1=参数值&参数名2=参数值')
this.$router.push({
  path:'/路由路径',
  query:{
    参数名1:'值1',
    参数名2:'值2'
  }
})
//接收
{{ $route.query.words}}

//2.动态路由传参
 { path: '/search/:words?', component: Search },//动态路由传参

this.$router.push('/路由路径/参数值)
this.$router.push({
  path:'/路由路径/参数值'
})
 //接收
{{ $route.params.words}}

（2）name命名路由跳转（适合path路径长的场景）

this.$router.push({
  name:'search'
})
...
const router = VueRouter({
  mode:'history',
  routes[
    {name:'search',path:'/search/:words?',component:Search},
    ...
  ]
})
//1.查询传参
this.$router.push({
  name:'search',
  query:{
    参数名1:'值1',
    参数名2:'值2'
  }
})

 //接收
{{ $route.query.参数名1}}

//2.动态路由传参
 { path: '/search/:words?', component: Search },//动态路由传参

this.$router.push({
  name:'search',
  params:{
    words:'值1',
  }
})

 //接收
{{ $route.params.words}}

实例：

五、路由重定向及404页面配置

只需将path:‘/’,加上redirect：‘/路由地址’

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' }, //redirect重定向
    { path: '/home', component: Home },
    { path: '/search/:id?', component: Search },//动态路由传参
    { path: '*', component: NotFound } //404页面配置
  ]
})

六、路由模式

• hash路由（默认）如: http://localhost:8080/#/home
  底层是基于a标签锚链接跳转实现
• history路由（常用）如：http://localhost:8080/home (以后上线需要服务器端支持)
  基于新增的html5,historyAPI实现的

const router = new VueRouter({
  // 注意：一旦采用了 history 模式，地址栏就没有 #，需要后台配置访问规则
  mode: 'history',
  routes: [
    { path: '/', redirect: '/home' },
    ...
  ]
})

七、路由前置守卫

//所有的页面在真正被访问之前（解析渲染对应组件页面），都会先经过全局前置守卫
//只有全局前置守卫放行了，才会到达对应的页面
//to:到哪里去，from：从哪里来，next():直接放行；next(路径)拦截到next里面配置的路径
//定义一个数组，存放需要token的页面路径
const authUrls =['/Pay','/cart']
router.beforeEach((to,from,next)=>{
  //如果to.path不在authUrls里面直接放行
  if(!authUrls.includes(to.path)){
    next()
    return
  }else{
    //权限页面，需要判断是否有token，没有就跳转到登录页
    //拿到vuex里面的token，将vuex模块组件里面的token配置到全局getters
    // getters: {
    //   token(state){
    //     return state.user.userInfo.token
    //   }
    // },
    const token = store.getters.token
    if(token){
      next()
    }else{
      next('/Login')
    }
  }

})