🌵Vue周边工具之Vue Router使用秘籍

小白菜的编程日记
562 阅读5分钟

1. 路由的基本概念与原理

1.1 路由

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。

在开发中，路由分为

  1. 后端路由

    概念：根据不同的用户URL请求，返回不同的内容

    本质：URL请求地址与服务器之间的对应关系

    后端渲染，会频繁的提交表单导致浏览器刷新，存在性能问题。

    Ajax前端渲染(解决了提交表单浏览器刷新的问题，但是不支持浏览器的前进后退操作)

    SPA单页面应用程序（整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作）

    SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录的变化、但是hash的变化不会触发新的URL请求）

    在实现SPA过程中，最核心的技术就是前端路由

  2. 前端路由

    概念：根据不同的用户事件，显示不同的页面内容

    本质：用户事件与事件处理函数之间的对应关系

    前端路由负责事件监听，触发事件后，通过事件函数渲染不同内容。

  3. 实现简易的前端路由

image.png

我们的要求是点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换。

基本原理：

结合动态组件

// 监听window的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称
winow.onhashchange=function(){
	// 通过location.hash获取到最新的hash值
}

1.2 Vue Router

Vue Router是vue.js官方的路由管理器。（更符合企业级开发的需要）

它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发

Vue Router包含的功能有：

  • 支持HTML5history模式或hash模式
  • 支持嵌套路由
  • 支持路由参数
  • 支持编程式路由
  • 支持命名路由

Vue Router的进阶功能

  • 导航守卫
  • 路由懒加载

2.Vue Router的基本使用

2.1 基本使用步骤

  1. 安装
  2. 添加路由链接
  3. 添加路由填充位
  4. 定义路由组件
  5. 配置路由规则并创建路由实例
  6. 把路由挂载到Vue根实例中

1.安装

npm install vue-router

我们在package.json文件中查看是否安装成功

image.png

因为我们是在一个模块化工程中使用它，必须通过Vue.use明确地安装路由功能：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

写在入口文件main.js中

image.png

2. 添加路由链接

// router-link 是vue中提供的标签，默认会被渲染为a标签，to属性默认会被渲染为href属性，to属性的默认值会被渲染为#开头的hash地址
    <router-link to="/user">这里是User界面</router-link>
    <router-link to="/register">这里是Register界面</router-link>

3. 添加路由填充位

也叫做路由占位符

将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置

<router-view></router-view>

4. 定义路由组件

<template>
  <div>
    这里是User界面
  </div>
</template>
<script>
export default {
  
}
</script>

<template>
  <div>
    这里是Register界面
  </div>
</template>
<script>
export default {
  
}
</script>

5. 配置路由规则并创建路由实例

// 创建路由实例对象
const router = new VueRouter({
  // routes是路由实例规则
  routes: [
    // 每条路由规则都是一个配置对象，其中至少包含path和component两个属性
    // path表示当前路由规则匹配的hash地址
    // component表示当前路由规则对应要展示的组件
    {path:'/user',component:User},
    {path:'/register',component:Register},
  ]
})

6. 把路由挂载到Vue根实例中

new Vue({
  render: (h) => h(App),
  store,
  router,
}).$mount("#app")

2.2 路由重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面

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

    const routes = [
      // 通过redirect属性指定一个新的路由地址
      { path: '/', redirect: '/user' },
      { path: '/user', component: User },
      { path: '/register', component: Register }
    ]

3. Vue Router嵌套路由

3.1 嵌套路由用法

1. 嵌套路由功能分析

  • 点击父级路由链接显示模板内容
  • 模板内容又有子级路由链接
  • 点击子级路由链接显示子级模板内容

image.png

2. 父级路由组件模板

  • 父级路由链接
  • 父组件路由填充位
<p>
  <router-link to="User">User</router-link>
  <router-link to="Register">Register</router-link>
</p>
<div>
  <!--控制组件的显示位置-->
  <router-view></router-view>
</div>

3. 子级路由模板

  • 子级路由链接
  • 子级路由填充位
const Register={
		template:`<div>
      <h1>Register组件</h1>
      <hr/>
      <router-link to="/register/tab1">Tab1</router-link>
      <router-link to="/register/tab2">Tab2</router-link>
      <!--子路由填充位置-->
      <router-view></router-view>
</div>`

}

4. 嵌套路由配置

const routes =[
  {path:'/user',component:User},
  {
    path:'/register',
    component:Register,
  	children:[
      {path:'/register/tab1',component:Tab1},
      {path:'/register/tab2',component:Tab2}
    ]
  },
]

4. Vue Router动态路由匹配

4.1 动态匹配路由的基本用法

应用场景：通过动态路由参数的模式进行路由匹配

动态路径参数，以冒号开头

    const routes = [
      { path: '/user/:id', component: User },
      { path: '/register', component: Register }
    ]

路由组件中通过$route.params获取路由参数


const User = {
      template: '<div> User组件--组件id为{{$route.params.id}} </div>'
    }

5.路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用pros将组件和路由解耦

1.props的值为布尔类型

    const routes = [
      { path: '/user/:id', component: User, props: true },
      { path: '/register', component: Register }
    ]

    const User = {
      props: ['id'],
      template: '<div> User组件--组件id为{{id}} </div>'
    }

image.png

2.props的值类型为对象类型(接受静态参数)

    const routes = [
      { path: '/user/:id', component: User, props: { username: '橙子', age: 18 } },
      { path: '/register', component: Register }
    ]

    const User = {
      props: ['username', 'age'],
      template: '<div> User组件--组件id为{{id}} 姓名为：{{username}}，年龄为{{age}}</div>'
    }

image.png

3.props的值类型为函数类型(接受静态和动态参数)

    const routes = [
      { path: '/user/:id', component: User, props: route => ({ username: '橙子', age: 18, id: route.params.id }) },
      { path: '/register', component: Register }
    ]

    const User = {
      props: ['username', 'age', 'id'],
      template: '<div> User组件--组件id为{{id}} 姓名为：{{username}}，年龄为{{age}}</div>'
    }

image.png

6. Vue Router命名路由

6.1 命名路由的配置规则

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为”命名路由”。

    const routes = [
      {
        name: 'user',
        path: '/user/:id', 
        component: User, 
        props: route => ({ username: '橙子', age: 18, id: route.params.id })},
      { path: '/register', 
        component: Register }
    ]

      <router-link to='/user/1'>User1</router-link>
      <router-link to='/user/2'>User2</router-link>
      <router-link :to='{name:"user",params:{id:3}}'>User3</router-link>
      <router-link to='/register'>Register</router-link>

7. Vue Router 编程式导航

7.1 页面导航的两种方式

声明式导航：通过点击链接实现导航的方式，叫做声明式导航。例如：普通页面中的<a></a>链接或vue中的<router-link></router-link>

编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航。

7.2 编程式导航基本用法

常用的编程式导航API如下：

  • this.$router.push('hash地址')
  • this.$router.go(n)
    const User = {
      props: ['username', 'age', 'id'],
      template: `
      <div> 
        <h1>User组件--组件id为{{id}} 姓名为：{{username}}，年龄为{{age}}</h1>
        <p><button @click="goRegister">去往注册页面</button></p>
        </div>
      `,
      methods: {
        goRegister() {
          this.$router.push('/register')
        }
      }
    }

最后

如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
GitHub 博客地址: github.com/skyblue309 。
本文总结了笔者觉得Vue Router中最核心的知识点，Vue Router 里面还有一些进阶用法，比如 导航守卫、路由懒加载等，如果读者有兴趣可看 Vuex Router 官方文档。

Vue Router 官方文档: router.vuejs.org/zh/

avatar
文章
阅读
粉丝