vue路由基本知识

路由

一个路由就是一个对应关系，key为路径，value为组件

用来实现单页面应用，每条路径对应一个页面

基本使用

​ 1.安装vue-router npm i vue-router@3.5.2 -S （vue2版本只能使用 vue-router3）

//在src目录下创建一个router文件夹，里面创建index.js文件
1.导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
// vue使用vueRouter插件
Vue.use(VueRouter)
// 创建路由实例对象
const router = new VueRouter({
    //routes中定义hash地址和组件之间的对应关系
    routes:[
    	{path:'/home',component:要展示的组件}
    ]
})
export default router

​ 2.要在main.js中挂载router实例

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

注意点

• 切换路径时，原来的组件会被销毁，切换到原路径时会重新挂载
• 路由组件通常写在pages文件夹中，普通组件写在components文件夹中
• 每个组件有$route和$router，在$route中有自己的路由信息，整个应用只有一个$router，所有组件的$router相同

---

router-view组件占位符

指定组件的呈现的位置

<router-view> </router-view> 将该路由下路径对应的组件放入

router-link

用来替换a链接

<router-link to='/home'>首页</router-link>

浏览器历史记录有两种写入方式 push和replace

router-link默认是push方式，每一条记录都会记录，从栈底开始，先进后出

replace是代替当前记录，只保存一条记录
<router-link replace>首页</router-link>

---

嵌套路由

1.在router中配置 children:[{}]

注意： children在path中不需要 /

  {
      path: '/home', component: Home,
      children: [
        { path: 'news', component: News },
        { path: 'message', component: Message },
      ]
    },

2.在组件跳转时要添加前缀

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

---

路由的query传参

1.组件跳转,对象写法，要传递的参数写在query里

 <router-link
        :to="{
          path: '/home/message/detail',
          query: {
            id: '',
            title: ''
          },
        }"
      >
</router-link>

2.接受参数

$route.query.id

$route.query.title

---

路由的props配置

方便路由组件接受参数

1.在router中配置props

 {
          path: 'message', component: Message,
          children: [{
            path: 'detail', component: Detail,
            props($route) {
              return { id: $route.query.id, title: $route.query.title }
            }
          }]
        },

2.在组件接受数据，之后便可以在组件模板中使用

export default {
  name: "Detail",
  props: ["id", "title"],
};

---

声明式导航&编程式导航

1. 声明式导航

​ 普通网页中点击a链接，在vue中点击都属于声明式导航

2. 编程式导航

​ 调用Api实现页面hash地址的变化

• this.$router.push('hash地址') 跳转到指定位置，并增加一条历史记录，可以前进和回退。
• this.$router.replace('hash地址') 跳转到指定位置，并且代替原来页面，不能回退。
• this.$router.back() 后退一步
• this.$router.forward() 前进一步

this.$router.push({
        path:'/home',
        query:{
          id:'002',
          name:'tom'
     	 }
})

---

缓存路由组件

为了将不展示的组件数据不丢失（路由一切换，默认组件自动销毁）

include=“组件名” 代表要缓存的组件是xxx

:include=[“组件名”,“组件名”] 缓存多个组件

 <keep-alive include="Home">
        <router-view></router-view>
 </keep-alive>

路由中独有的声明周期

1. activated(){} 组件被激活时调用

2. deactivated(){} 组件失活时调用

路由守卫

就是为了控制路由的访问权限，满足一些条件才能进入页面

1. 全局前置守卫 router.beforeEach((to,from,next)=>{})

   • to 是将要访问的路由的信息 to.path 是hash地址
   • from 是将要离开的路由的信息
   • next( ) 是放行 next(‘/login’) 跳转到登录页面

   在进行权限校验的路由里配置 meta:{isAuth:true}

   router.beforeEach((to, from, next) => {
     if (to.meta.isAuth) {
       if (localStorage.getItem('school') === 'guigu') {
         next()
       }
       else {
         alert('sorry')
       }
     } else {
       next()
     }
   })
   

   全局后置守卫，在组件跳转后执行

   router.afterEach((to) => {
     document.title = to.meta.title || "vue"
   })
   

2. 独享守卫，配置在path中

   是某个路由独享的，配置在该路由下

     { path:'news',
       component:News,
       beforeEnter:(to,from,next)=>{
         if (to.meta.isAuth) {
           if (localStorage.getItem('school') === 'guigu') {
             next()
             }
             else {
               alert('sorry')
             }
           } else {
             next()
           }
          }
       }
   

3. 组件内路由守卫

路由进入该组件时进行一些判断

1. 进入守卫 beforeRouteEnter(to,from,next){}
2. 离开守卫 beforeRouteLeave (to, from, next) {}