Vue-Router

# 路由

一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理。Vue-Router (opens new window)

# SPA应用

单页面应用
整个应用只有一个完成的页面
页面导航不会刷新页面，只做局部的更新

# 使用vue-router

注意

Vue2中，要用vue-router3版本
Vue3中，要用vue-router4版本

# 安装vue-router

npm install vue-router

# 配置路由器

// 创建router.js文件
import Vue from 'vue'
import VueRouter from "vue-router";
Vue.use(VueRouter)
export default new VueRouter({
    routes:[
        {path:'/home',component: () => import('@/pages/Home.vue'),},
        {path:'/about',component: () => import('@/pages/About.vue'),}
    ]
})

1
2
3
4
5
6
7
8
9
10

# 挂载到根实例中

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

1
2
3
4
5

# 页面中的使用

<!-- 切换路由 active-class用于配制高亮样式 -->
<router-link class="navList" active-class="active" to="/about">关于</router-link>
<!-- 指定展示位置 -->
<router-view></router-view>

1
2
3
4

# 路由基础配置

# 路由器的两种模式

hash模式

#及后面的内容就是hash值

hash值不会包含在HTTP请求中
地址中带着#号，不美观
兼容性较好

history模式

地址美观，干净
兼容性和hash模式相比略差
需要后端支持，解决刷新页面404服务端的问题

# 嵌套路由

// 子路由中不需要加/
const routes = [
    {
        path:'/home',
        component:()=> import('@/pages/Home/index.vue'),
        children:[
            {
                path:'history',
                component:()=> import('@/pages/Home/children/History.vue'),
            },
            {
                path:'user',
                component:()=> import('@/pages/Home/children/User.vue'),
            }
        ]
    },
    {
        path:'/about',
        component:()=> import('@/pages/About/index.vue'),
    }
]
// 路由跳转
<router-link to="/home/user">用户中心</router-link>
<router-link to="/home/history">历史订单</router-link>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 命名路由

路径太长的情况下，可以简化路由的跳转

const routes = [
  {
    path:'/home',
    component:()=> import('@/pages/Home/index.vue'),
    children:[
        {
            path:'history',
            name:'myhistory',  // 设置路由名称
            component:()=> import('@/pages/Home/children/History.vue'),
        },
    ]
  }
]
// 通过命名路由来跳转 使用query:{id:item.id}来传递参数
<router-link :to="{name:'myhistory'}">历史记录</router-link>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 路由参数传递

query参数

// 1.直接在路由后面拼接参数
<router-link :to="`/home/history/watch?id=${item.id}`">观看历史</router-link>
<router-link :to="{
    path:'/home/history/watch',
    query:{id:item.id}}"
>观看历史</router-link>
// 2.获取
this.$route.query.id

1
2
3
4
5
6
7
8

params参数

注意

路由携带params参数时，若使用to的对象写法,必须使用命名路由(name属性)，不能使用path配置项

<router-link :to="`/home/history/watch/${item.id}`">观看历史</router-link>
<router-link :to="{
    name:'myhistory',
    params:{
        id:item.id,
        name:item.name
    }
}">观看历史</router-link>
// 路由中声明接受params参数(可设置多个参数)
{
  path:'watch/:id/:name',
  name:'myhistory',
  component:()=> import('@/pages/Home/children/children/Watch.vue'),
}
// 接受params属性
this.$route.params.id;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 路由props参数

{
  path:'watch/:id/:name',
  // 第一种写法(Object)   该对象中所有的key-value的组合都会通过props传递到组件
  props:{id:900},  
  // 第二种写法(boolean)  把路由收到的所有parmas参数通过props传递给组件
  props:true,      
  // 第三种写法(Function) 返回的对象中每一组key-value都会通过props传递给组件
  props($route){
      // return {id:$route.query.id,title:$route.query.name}
      return {id:$route.params.id,title:$route.params.name}
  },
  component:()=> import('@/pages/Home/children/children/Watch.vue'),
}
// 组件接受
props:['id','name']

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 编程式导航

借助 router 的实例方法来定义导航链接

this.$router.push({})     // 动态的导航到一个新URL，这个方法会向 history 栈添加一个新的记录
this.$router.replace({})  // 动态的导航到一个新URL，不会向 history 栈添加一个新的记录
this.$router.go()         // 用于在浏览器的历史记录中前进或后退指定的步数。正数表示前进，负数表示后退
this.$router.back()       // 返回到上一个历史记录
this.$router.forward()    // 前进到下一个历史记录

1
2
3
4
5

# 缓存路由组件

让不展示的路由组件保持挂载，不被销毁

<!-- 
  User表示这个组件名进行缓存 User是组件中的name
  不写表示所有内的组件都会进行缓存
  include="User"  缓存一个路由组件
  :include="['User','History']"  缓存多个路由组件
 -->
<keep-alive include="User">
  <router-view></router-view>
</keep-alive>

1
2
3
4
5
6
7
8
9

# 路由生命周期钩子

路由组件独有的，用于捕获路由组件的激活状态。当我们使用缓存的时候，也就是keep-alive的时候，我们正常的钩子函数就没办法执行了，这个时候activated和deactivated就会执行

activated(){
  console.log('激活时触发');
},
deactivated(){
  console.log('失活时触发');
}

1
2
3
4
5
6

# 路由守卫

对路由进行权限控制

# 全局守卫

// 全局前置守卫 初始化执行，每次路由切换前执行
router.beforeEach((to,from,next)=>{
  to     // 即将要进入的目标 路由对象
  from   // 当前导航正要离开的路由
  next() // 向下执行
})
// 全局后置守卫 初始化执行，每次路由切换后执行
router.afterEach((to, from)=>{})

1
2
3
4
5
6
7
8

# 独享守卫

某一个路由所独享的

{
  path:'watch',
  beforeEnter(to,from,next){},
  component:()=> import('@/pages/Home/children/children/Watch.vue'),
},

1
2
3
4
5

# 组件守卫

beforeRouteEnter(to, from, next) {
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 `this`
  // 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
},
beforeRouteLeave(to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上次更新: 2024/10/09, 16:59:47

← Vuex Vue-CLI→