@TOCVue 路由 vue-router

1 安装vue-router

npm i vue-router -s

2 创建路由模块

创建路由模块

// src/router/index.js就是当前项目的路由模块
// 1 导入Vue 和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入路由要用到的组件
import Home from '../components/Home.vue'
import Movie from '../components/Movie.vue'
import About from '../components/About.vue'
 
// 2 调用vue.use()函数,把VueRouter安装为vue插件
Vue.use(VueRouter)

// 3 创建路由的实例对象
const router = new VueRouter({
  // 定义数组routes[],对应哈希地址与组件之间的关系
  routes: [
  //路由规则
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
   {
      path: '/about',
      component: About,
      // about组件里的嵌套路由
      children: [
        { path: 'tab1', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    },
    // 路由重定向:强制跳转
    { path: '/', redirect: '/home' }
  ]
})

// 4 向外共享路由的实例对象
export default router

3 在main.js导入路由模块

// 1 导入路由模块,拿到路由实例
import router from '../src/router/index.js'
new Vue({
  render: h => h(App),
  
  //  2 挂载路由
  router: router
}).$mount('#app')

4 在App.vue中使用router-view占位符

<template>
  <div class="app-container">
    <h1>App2 组件</h1>
    //使用router-link替代a链接
   // <a href="#/home">首页</a>
   // <a href="#/movie">电影</a>
  //  <a href="#/about">关于</a>


    <hr />
    <router-view ></router-view>
  </div>
</template>

5 动态路由

5.1 定义:把hash地址可变的部分定义为参数项,提高路由规则的可复用性

5.2 在vue-router中使用英文的冒号定义参数项:id

在这里插入图片描述

5.3 在组件中使用$route.prams.id进行调用

//Movie组件
<template>
  <div class="movie-container">
    <h3>Movie 组件---{{$route.params.id}}</h3>
    <hr>
    <button @click="showThis">打印this</button>
      </div>
</template>

注意1:在hash地址中,/后面的参数叫做“路径参数”

在路由“参数对象”$route中,需要使用$route.prams来访问路径参数 

注意2 在hash地址中,“?”后面的参数叫做“查询参数”

在路由“参数对象”中, 需要使用$route.query来访问查询参数

注意3 在hash地址中,path只是路径部分,fullPath才是完整路径

例如
" /movie/1?name=%27as%27 " 是fullPath
" /movie/1" 是path

6 声明式导航VS编程式导航

6.1 声明式导航:通过a链接或router-link点击的跳转

6.2 编程式导航:通过location.href的跳转

6.3 vue-router提供的编程式导航API

6.3.1 跳转到指定hash地址,并增加一条历史记录

this.$router.push(‘hash地址’)

6.3.2 跳转到指定hash地址,并替换掉当前的历史记录

this.$router.replace(‘hash地址’)

6.3.3 在浏览历史中前进后退

this.$router.go(数值n)
在实际操作中一般只前进或者后退一层,vue-router简化:

6.3.3.1前进

this.$router.forward()

6.3.3.2 后退

this.$router.back()

7 导航守卫

7.1 导航守卫可以控制路由的访问权限

7.2 全局前置守卫:每次发生路由的导航跳转时,都会触发全局前置守卫,可以对每个路由进行访问权限的控制

在这里插入图片描述

7.2.1 全局前置导航守卫回调函数的3个形参

在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐