vue2.0-路由

目录

1. 前端路由的概念与原理

1）SPA与前端路由

2）前端路由的工作方式

3）实现简易的前端路由

2. vue-router的基本使用

1）vue-router

2）vue-routre安装和配置的步骤

 

3. vue-router的常见用法

1）路由重定向

2）嵌套路由

1⃣️通过children属性声明子路由规则

2⃣️默认子路由

3）动态路由匹配

1⃣️ 为路由规则开启props传参

2⃣️query和fullPath

4）声明式导航与编程式导航

1⃣️vue-router中的编程式导航API

2⃣️$router.go的简化用法

5. 导航守卫

1⃣️全局前置守卫

2⃣️ next函数的3种调用方式

3⃣️控制后台主页的访问权限

---

 

1. 前端路由的概念与原理

1）SPA与前端路由

路由（router）就是对应关系。

SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成，此时，不同组件之间的切换需要通过前端路由来实现。

在SPA项目中，不同功能之间的切换，要依赖于前端路由来完成。

前端路由：Hash地址与组件之间的对应关系。

2）前端路由的工作方式

1. 用户点击了页面上的路由链接
2. 导致了URL地址栏中的Hash值发生了变化
3. 前端路由监听到了Hash地址的变化
4. 前端路由把当前Hash地址对应的组件渲染到浏览器中

结论：前端路由，指的是Hash地址与组件之间的对应关系。 

3）实现简易的前端路由

步骤1：通过<component>标签，结合comName动态渲染组件。

步骤2:只要当前的App组件一被创建，就立即监听window对象的onhashchange()方法

<template>
  <div class="app-container">
    <h1>App 根组件</h1>

    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />

   <component :is="comName"></component>
  </div>
</template>

<script>
// 导入组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

export default {
  name: 'App',
  data() {
    return {
      //动态组件的位置，展示的组件的名字
      comName: 'Home'
    }
  },
  created() {
    // 只要当前的App组件一被创建，就立即监听window对象的onhashchange()方法
    window.onhashchange = () => {
      console.log('监听到了hash地址的变化', location.hash);
      switch(location.hash) {
        case '#/home':
          this.comName = 'Home';
          break;
        case '#/movie':
          this.comName = 'Movie';
          break;
        case '#/about':
          this.comName = 'About';
          break;    
      }
    }
  },
  // 注册组件
  components: {
    Home,
    Movie,
    About
  }
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>

结果为：

 

2. vue-router的基本使用

1）vue-router

vue-router是vue.js官方给出的路由解决方案，只能结合vue项目进行使用，能够轻松的管理SPA项目中组件的切换。

官方文档：Vue Router

2）vue-routre安装和配置的步骤

1. 安装vue-router包
2. 创建路由模块
3. 导入并挂载路由模块
4. 声明路由链接和占位符

在vue2的项目中，安装vue-router的命令：npm i vue-router@3.5.2 -S

在src源代码目录下，新建router/index.js路由模块：

//1. 导入 Vue 和 VueRouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'

//2. 调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)

//3. 创建路由的实例对象
const router = new VueRouter()

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

在main.js导入并挂载路由模块：

// 导入路由模块，拿到路由的实例对象
import router from '@/router/index.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 在Vue项目中用到路由，必须把路由实例对象通过下面的方式进行挂载
  // router:路由的实例对象
  router
}).$mount('#app')

在App.vue中声明路由链接和占位符，然后在路由模块中声明路由之间的对应关系：

<template>
  <div class="app-container">
    <h1>App2组件</h1>
      
    <!-- <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a> -->
    <!-- 当安装和配置了vue-router之后，就可以使用router-link来替代普通的a链接 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>

    <!-- 只要在项目中安装并且配置了vue-router，就可以使用router-view这个组件 -->
    <!-- 作用：占位符 -->
    <router-view></router-view>

  </div>
</template>

//3. 创建路由的实例对象
const router = new VueRouter({
    //routes是一个数组，定义hash地址与组件之间的关系
    routes: [
        {path: '/home', component: Home },
        {path: '/movie', component: Movie},
        {path: '/about', component: About}

    ]
})

 

3. vue-router的常见用法

1）路由重定向

用户在访问地址A的时候，强制用户跳转到C，从而展示特定的组件页面。

通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向。

//3. 创建路由的实例对象
const router = new VueRouter({
    //routes是一个数组，定义hash地址与组件之间的关系
    routes: [
        // 重定向路由规则 
        // 当用户访问 / 的时候，通过redirect属性跳转到/home对应的路由规则
        {path: '/',redirect: 'home'},
        // 路由规则
        {path: '/home', component: Home },
        {path: '/movie', component: Movie},
        {path: '/about', component: About}

    ]
})

 

2）嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由。

<template>
  <div class="about-container">
    <h3>About 组件</h3>

    <!-- 子级路由链接 -->
    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>
    
    <hr />

    <!-- 子级路由占位符 -->
    <router-view></router-view>
  
  </div>
</template>

1⃣️通过children属性声明子路由规则

在src/router/index.js路由模块中，导入需要的组件，并使用children属性声明子路由规则：

import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

//3. 创建路由的实例对象
const router = new VueRouter({
    //routes是一个数组，定义hash地址与组件之间的关系
    routes: [
        // 重定向路由规则 
        // 当用户访问 / 的时候，通过redirect属性跳转到/home对应的路由规则
        {path: '/',redirect: 'home'},
        // 路由规则
        {path: '/home', component: Home },
        {path: '/movie', component: Movie},
        {path: '/about',
         component: About,
        //  通过children属性，嵌套声明子级路由规则
         children: [
            // 子路由规则一般不以 / 开头
            {path: 'tab1', component: Tab1},
            {path: 'tab2', component: Tab2}
         ]
        }

    ]
})

结果为：

2⃣️默认子路由

如果children数组中，某个路由规则的path值为空字符串，则这条路由规则叫做默认子路由。

也可以使用路由重定向redirect属性。

// About.vue 

<template>
  <div class="about-container">
    <h3>About 组件</h3>

    <!-- 子级路由链接 -->
    <router-link to="/about">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>
    
    <hr />

    <!-- 子级路由占位符 -->
    <router-view></router-view>
  
  </div>
</template>


// src/router/index.js 

//3. 创建路由的实例对象
const router = new VueRouter({
    //routes是一个数组，定义hash地址与组件之间的关系
    routes: [
        // 重定向路由规则 
        // 当用户访问 / 的时候，通过redirect属性跳转到/home对应的路由规则
        {path: '/',redirect: 'home'},
        // 路由规则
        {path: '/home', component: Home },
        {path: '/movie', component: Movie},
        {path: '/about',
        //  redirect: '/about/tab1',
         component: About,
        //  通过children属性，嵌套声明子级路由规则
         children: [
            // 子路由规则一般不以 / 开头
            // 默认子路由：如果children数组中，某个路由规则的path值为空字符串，则这条路由规则叫做默认子路由
            {path: '', component: Tab1},
            {path: 'tab2', component: Tab2}
         ]
        }

    ]
})

 结果为：

 

3）动态路由匹配

把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。

在vue-router中使用英文的冒号(:)来定义路由的参数项。

1⃣️ 为路由规则开启props传参

 {path: '/movie/:mid', component: Movie, props:true}


<script>
export default {
  name: 'Movie',
  // 接收 props 数据
  props: ['mid'],
  methods: {
    showThis() {
      console.log(this)
    }
  }
}
</script>

2⃣️query和fullPath

在hash地址中，？后面的参数项是查询参数。在路由参数对象中，需要使用this.$route.query来访问查询参数。

在this.$route中，path只是路径部分，fullPath是完整的地址。

 

4）声明式导航与编程式导航

在浏览器中，点击链接实现导航的方式，叫做声明式导航。

• 普通网页中点击<a>链接，vue项目中点击<route-link>都属于声明式导航

在浏览器中，调用API方法实现导航的方式，叫做编程式导航。

• 普通网页中调用location.href跳转到新页面的方式，属于编程式导航

1⃣️vue-router中的编程式导航API

• this.$router.push('hash地址')：跳转到指定hash地址，并增加一条历史记录
• this.$router.replace('hash地址')：跳转到指定hash地址，并替换掉当前的历史记录

<template>
  <div class="home-container">
    <h3>Home 组件</h3>

    <button @click="gotoM1">通过push跳转到电影1</button>
    <button @click="gotoM">通过replace跳转到电影1</button>

    <hr />

 
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    gotoM1() {
      // 通过编程式导航 API，导航跳转到指定的页面,并增加一条历史记录
      this.$router.push('/movie/1')
    },
    gotoM() {
      this.$router.replace('/movie/1')
    }
  }
}
</script>

结果为：

 

• this.$router.go(数值n)：可以在浏览历史中前进、后退

<template>
  <div class="movie-container">
    <!-- this.$route 是路由的“参数对象” -->
    <!-- this.$router 是路由的“导航对象” -->
    <h3>Movie 组件 --- {{ $route.params.mid }} --- {{ mid }}</h3>
    <button @click="showThis">showThis</button>
    <button @click="goback">后退</button>
  </div>
</template>

<script>
export default {
  name: 'Movie',
  // 接收 props 数据
  props: ['mid'],
  methods: {
    showThis() {
      console.log(this)
    },
    goback() {
      // go(-1) 表示后退一层
      // 如果后退的层数超过上限，则原地不动
      this.$router.go(-1)
    }
  }
}
</script>

2⃣️$router.go的简化用法

在实际开发中，一般只会前进和后退一层页面，因此vue-router提供了如下两个便捷方法：

• $router.back()：在历史记录中，后退到上一个页面
• $router.forward()：在历史记录中，前进到下一个页面

5. 导航守卫

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

1⃣️全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制：

全局前置守卫的回调函数中接收3个形参，格式为：

// 为router实例对象声明全局前置导航守卫
// 只要发生了路由的跳转，必然会触发 beforeEach 指定的 function回调函数
router.beforeEach((to,from,next) => {
    //to表示将要访问的路由的信息对象
    console.log(to);
    //from表示将要离开的路由的信息对象
    console.log(from);
    //next():表示放行的意思
    next();
})

2⃣️ next函数的3种调用方式

​​​​​​​

3⃣️控制后台主页的访问权限