Vue2 路由

路由

一个路由就是一个对应关系，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文件夹中
    每个组件有 r o u t e 和 route和 route和router，在 r o u t e 中有自己的路由信息，整个应用只有一个 route中有自己的路由信息，整个应用只有一个 route中有自己的路由信息，整个应用只有一个router，所有组件的$router相同

router-view组件占位符

指定组件的呈现的位置

将该路由下路径对应的组件放入

##router-link

用来替换a链接

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

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

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

replace是代替当前记录，浏览器只保存一条记录

首页

##redirect重定向

重新跳转到指定位置

routes:[
        {path:'/',redirect:'/home'},
        {path:'/home',component:Home}
    ]

嵌套路由

1.在router中配置 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

路由的params传参

传参前先占位

params传参时，to写成对象写法时，传参不能用path，只能用name

参数不能是数组

params传参时，若想让参数传不传都行，在占位时在参数后加?

<router-link :to="`/home/message/${m.id}/${m.title}`">Message</router-link>

3.接受参数

$route.params.id

$route.params.title

路由的props配置

方便路由组件接受参数

1.在router中配置props，return一个对象

 {
          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地址的变化，to可以怎么写，push()括号内就可以怎么写

    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(){} 组件失活时调用

路由守卫

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

全局前置守卫 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"
})

独享守卫，配置在path中

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

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

组件内路由守卫

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

1. 进入守卫 beforeRouteEnter(to,from,next){}

2. 离开守卫 beforeRouteLeave (to, from, next) {}

路由器的两种工作模式

路由器默认是hash模式（#），可以在路由器中添加mode:'history',转变为history模式