🤟🏼 冇事来学系--Vue2.0中路由Router

GTW_Zeus
149 阅读5分钟

「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

路由的概念与原理

路由(router)，就是对应关系。即 Hash地址(锚点链接) 与 组件 之间的对应关系

注意：锚点链接的特点-->不会刷新页面，但是会产生浏览历史

前端路由的工作方式

  1. 用户点击了页面上的路由链接
  2. URL地址栏中的Hash值发生变化 (URL地址的#开始的部分)
  1. 前端路由监听到了Hash地址的变化
  2. 前端路由把当前Hash地址对应的组件渲染到浏览器中

前端路由就是 path 与 component 之间的对应关系

前端路由的原理：

  1. 路由链接的href属性设置为Hash地址 (#开头)

注：hash值不会包含在HTTP请求中，是不会作为路径的一部分发给服务器

<template>
  <div>
  	<a href="#/home">首页</a>
    <a href="#/about">关于</a>    
  </div>
	
</template>
  1. 利用动态组件，来控制显示 与Hash地址相对应的组件
  2. 通过监听浏览器的window对象上的 onhashchange 事件，用location.hash获取当前的hash地址
<template>
	<a href="#/home">首页</a>
	<a href="#/movie">电影</a>
  <a href="#/about">关于</a>  
	<component :is="comName"></component>
</template>


<script>
  import Home from '@/components/Home.vue'
  import About from '@/components/About.vue'
  
	export default {
    name: 'App'
  	data(){
    	return {
      	comName: ''
      }
    },
    created(){
      // 只要当前的App组件被创建，就立即监听window对象的onhashchange事件
    	window.onhashchange = () => {		// 注意这里不能用function，this指向会有问题
      	console.log('监听到了hash地址的变化', location.hash)
        switch(location.hash) {
          case '#/home':
            this.comName = 'Home'
            break
          case '#/about':
            this.comName = 'About'
            break
        }
      }
    }
    // 注册组件
    components: {
    	Home,
      About
    }
  }
</script>

vue-router

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

vue-router的安装与配置：

  1. 安装vue-router包
// vue-router@版本号 -S是将此依赖保存在package.json文件中的dependencies节点之下
npm i vue-router@3.5.2 -S
  1. 创建路由模块

在src源代码目录下，新建一个router文件夹，并且在里面创建index.js，并初始化如下代码

// 导入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'

// 调用Vue.use()函数，把VueRouter安装为Vue的插件
// Vue.use()函数的作用就是给项目装插件。只要是插件都要用Vue.use()来安装
Vue.use(VueRouter)

// 创建路由的实例对象，在构造函数中可以传入一个配置选项
const router = new VueRouter({
	// routes是一个数组，用来定义"hash地址"与"组件"之间的对应关系，即路由规则 
  routes: [
    // {path: 路由地址, component: 组件名称}  注意路由地址不带#
    {path: '/home', component: Home},
    {path: '/movie', component: Movie},
    {path: '/about', component: About}
  ]
  
})

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

src/router/index.js 就是当前项目的路由模块

  1. 导入并挂载路由模块
// 在main.js中，导入并挂载路由模块
import Vue from 'vue'
import App from './App.vue'


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

// 模块化导入时，若只给定文件夹，则默认会导入这个文件夹下的index.js文件
// import router from '@/router'

// 关闭vue的生产环境提示
Vue.config.productionTip = false

// 挂载路由模块
new Vue({
	render: h => h(App),
  // router: 路由的实例对象
  router 	// router: router的简写
})
  1. 声明路由链接和占位符
<template>
<div class="app-container">
  <h1>App根组件</h1>  
  
  <!-- 在根组件中声明路由链接 -->
  <a href="#/home">首页</a>				
  <a href="#/movie">电影</a>
  <a href="#/about">关于</a>
  
  <!-- 注意：在安装了vue-router之后，通常用router-link来代替a链接 -->
  <!-- router-link的链接地址不带井号 -->
  <router-link to="/home">首页</router-link>	
  <router-link to="/movie">电影</router-link>
  <router-link to="/about">关于</router-link>
  
  <hr>
  
  <!-- 之前使用动态组件component 来控制组件的 -->
  <!-- 在项目中安装和配置了vue-router，就可以使用 router-view 组件 -->
  <!-- router-view组件的作用就是作为一个组件的占位符 -->
  <router-view></router-view>
  
</div>
</template>

注意：

  1. 在切换路由的时候，隐藏了的路由组件是 被销毁 的，再切换回来的时候又重新挂载的
  2. 每一个路由组件都有一个$route属性，里面存储着各自的路由信息
  1. 整个应用只有一个router，可以通过每个组件的 $router属性获得

路由重定向

问题场景：当打开网页的时候，默认显示的是首页组件的页面。但是路由链接的hash地址却是井号加斜杠(#/)

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

方法：通过路由规则的 redirect属性 ，指定一个新的路由地址

const router = new VueRouter({
	// routes是一个数组，用来定义"hash地址"与"组件"之间的对应关系，即路由规则 
  routes: [
    // {path: 路由地址, component: 组件名称}  注意路由地址不带#
    // 当用户访问 / 的时候，通过redirect属性重定向到'/home'对应的路由规则
    {path: '/', redirect: '/home'},
    {path: '/home', component: Home},
    {path: '/movie', component: Movie},
    {path: '/about', component: About}
  ]
  
})

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

嵌套路由

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

父组件包裹子组件，子组件中又有路由链接，来控制显示孙子级的组件

  • 子级路由链接的写法
// 在About组件中
<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>
  • 通过children属性声明 子路由规则

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

// 导入需要的组件
import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

const router = new VueRouter({
	routes: [
    {path: '/home', component: Home},
    {path: '/movie', component: Movie},
    { // about 的路由规则
    	path: '/about',
      component: About,
      children: [	// 通过children属性，嵌套声明子级路由规则
        {path: 'tab1', component: Tab1}, // 访问/about/tab1时展示Tab1组件
        {path: 'tab2', component: Tab2}  // 访问/about/tab1时展示Tab2组件
        // 注意：子路由协议不要以 斜线/ 开头
      ]
    }
  ]
})
  • 默认子路由

问题场景：在显示子组件的时候，默认显示某一个孙子级组件

方法一：设置一个路由重定向，将子组件中的某一个孙子级组件默认显示

const router = new VueRouter({
	routes: [
    {path: '/home', component: Home},
    {path: '/movie', component: Movie},
    
    { // about 的路由规则
    	path: '/about',
      component: About,
      redirect: '/about/tab1',	// 默认展示Tab1组件
      children: [	
        {path: 'tab1', component: Tab1}, // 访问/about/tab1时展示Tab1组件
        {path: 'tab2', component: Tab2}  // 访问/about/tab1时展示Tab2组件
        // 注意：子路由协议不要以 斜线/ 开头
      ]
    }
  ]
})

默认子路由

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

 { // about 的路由规则
    	path: '/about',
      component: About,
      
      children: [	
        {path: '', component: Tab1}, // 访问/about/tab1时展示Tab1组件
        {path: 'tab2', component: Tab2}  // 访问/about/tab1时展示Tab2组件
        
      ]
    }

注意：设置了默认子路由，相应的路由链接也得修改

路由链接的地址得和路由规则的path一致

// 在About组件中
<template>
	<div class="about-container">
    <h3>About组件</h3>
    
    <!-- 子级路由链接 -->
    <!-- tab1是默认子路由 -->
    <router-link to="/about">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>
    
    <hr>
    
    <!-- 子级路由占位符 -->
    <router-view></router-view>
    
    
	</div>
</template>

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖

avatar
文章
阅读
粉丝