09路由vue-router

路由的基本使用

注意事项

• 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
• 通过切换，"隐藏"了路由的组件，默认是被销毁的，需要的时候再去挂载
• 每个组件都有自己的$route属性，里面存储着自己的路由信息
• 整个应用只有一个router，可以通过组件的$router属性获取到

一级路由

1.新建router文件夹,在文件夹内新建index.js文件,编写配置项

//引入VueRouter
import VueRouter from "vue-router"; 
//引入组件
import Home from "../pages/Home";   
import About from "../pages/About";
//创建router实例对象，管理一组一组的路由规则
const router = new VueRouter({
  routes: [
    {
      path: "/home",
      name: "Home",
      component: Home
    },
    {
      path: "/about",
      name: "About",
      component: About
    },

  ]
})
//暴露router
export default router

2.配置main.js文件

import Vue from "vue";
import App from "./App";

//引入VueRouter
import VueRouter from "vue-router";
//引入配置的router
import router from "./router";
//使用VueRouter
Vue.use(VueRouter)


new Vue({
  render: h => h(App),
  router,//挂载router
}).$mount("#app")

多级路由

1.在index.js中使用children配置项:

const router = new VueRouter({
  routes: [
    {
      path: "/home",
      name: "Home",
      component: Home,
      //配置Home组件下的多级路由
      children:[
        {
          path: "home_news", //此处一定不要写/home_news
          component: Home_News
        },
        {
          path: "home_message", //此处一定不要写/home_message
          component: Home_Message
        }
      ]
    },
    {
      path: "/about",
      name: "About",
      component: About
    },

  ]
})

2.跳转与展示(要写完整路径)

<router-link to="/home/home_news">News</router-link>
<router-link to="/home/home_message">Message</router-link>
<router-link to = "/home/news">News</router-link>

query路由传参

• 传递参数(推荐对象语法)

<li v-for="m in msgList" :key="m.id">
   <router-link :to="{
      path: '/home/home_message/detail',
      //填写配置项
      query:{
        id: m.id,
        title: m.title
          }
        }">
     {{m.title}}
   </router-link>}
</li>

• 接受参数

$route.query.id
$route.query.title

路由命名

• 作用:简化路由的跳转

  path: '/home/home_message/detail', //原始写法

  name: 'detail',//命名路由----------------->>推荐写法

params路由传参

1.在index.js中对应的路由配置下使用占位符声明接受params参数

children:[
    {
      //使用占位符 `/:id`和`/:title` 接收参数
      path: "detail/:id/:title",
      name: "detail",
      component: Detail
    }          
  ]

2.传递参数

<router-link :to="{
    name: 'detail',//命名路由
    params:{
      id: m.id,
      title: m.title
    }
   }">
  {{m.title}}
</router-link>

3.接受参数

$route.params.id
$route.params.title

router-link的replace属性

• 作用：控制路由跳转时操作浏览器历史记录的模式
• 浏览器的历史记录由两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时默认为push
• 如何开启replace模式：<router-link replace .....>News</router-link>

编程式路由导航

• 作用:不借助<router-link>实现路由跳转，让路由跳转更灵活
• 相关PAI

this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)

this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)

this.$router.back(): 请求(返回)上一个记录路由

this.$router.go(-1): 请求(返回)上一个记录路由

this.$router.go(1): 请求下一个记录路

缓存路由组件

• 作用:让展示的路由组件保存挂载，不被销毁
• 注意:include内编写的是组件名
• 多个组件需要保活时,这样写即可

<keep-alive :include="['News','About']">
    <router-view></router-view>
</keep-alive>

---

• 单个组件保活写法

<keep-alive include="News"> //News为组件名
    <router-view></router-view>
</keep-alive>

两个新的生命周期钩子

• 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
• 钩子
  • activated路由组件被激发时触发
  • deactivated路由组件失活时触发

路由守卫

全局前置守卫beforeEach

• 哪个组件需要配置路由守卫,就在相应的配置项中编写meta,例如:

{
  path: "home_news",
  name: "home_news",
  component: Home_News,
  meta:{isAuth: true} //需要权限验证,就配置此项
},

• 全局前置路由首位--->初始化or路由切换之前被调用

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

  //如果点击路由守卫的组件,则进入判断
  if(to.meta.isAuth){
    if(localStorage.getItem("school") === "atguigu"){//判断正确 放行
      next()
    }else {//判断错误 不放行
      alert("学校名称不对!")
    }
  }else {//如果点击了其他组件,直接放行
    next()
  }
})

export default router //记得导出 router

全局后置守卫afterEach

• //全局后置路由首位--->初始化/路由切换后被调用

router.afterEach( (to, from)=>{
  document.title = to.meta.title || "Vue" //点击了组件后,更改页签的title
})

独享守卫beforeEnter

• 在index.js中编写配置,例如在Home_News组件配置独享守卫:

{
  path: "home_news",
  name: "home_news",
  component: Home_News,
  meta:{isAuth: true, title: "新闻"}, //需要权限验证

  //home_news独享守卫
  beforEnter(to,from,next){
    console.log('beforeEnter',to,from)
    if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
       if(localStorage.getItem('school') === 'xxx'){
           next()
       }else{
           alert('暂无权限查看')
           //next({name:'xxx'})
       }
    }else{
        next()
    }
}

组件内守卫beforeRouteEnter和beforRouteLeave

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next){
},
//离开守卫：通过路由规则，离开该组件时被调用
beforRouteLeave(to,from,next){
}

history与hash模式

• 是路由器的两种工作模式
• 对于url来说，#及其后面的内容就是hash值
• hash值不会包含在HTTP请求中，即hash值不会带给服务器

hash

• 地址中永远带#号，不美观
• 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
• 兼容性较好

history

• 地址干净、美观
• 兼容性和hash模式相比略差
• 应用部署上线时需要后端人员支持，解决刷新页面服务端的404问题