Vue框架基础9 - Router路由

Vue Router

简介：Vue Router是 Vue.js 官方的路由管理器，是一个核心插件，与 Vue.js 高度集成。

SPA

single page application（单页面应用程序），即在整个应用中，只有一个 html 页面，在用户与应用之间实现交互时能够动态更新页面内容。

前端路由

利用 hash或 history 改变不会向后端发起新的 html 请求

安装 Router 路由

在控制台输入指令：

$ npm i vue-router@3.5.3
# 或
$ yarn add vue-router@3.5.3

定义 VueRouter 对象

1.在项目src文件夹中创建文件夹 router，在文件夹内创建一个index.js文件。

2.在刚才创建的 index.js 文件中定义 VueRouter 。
路由模式：

• hash：利用 URL 中 #hash hash 值改变后，不会发送新的网络请求的特点，来实现的路由。使用如 #/home、#/login 类似的方式来表示所请求的前端 URL 资源。
• history：利用 h5 中 history 新增的 API pushState()、replaceState() 来实现。其路由的格式与服务端路由 URL 格式一致（比 hash 模式来说，没有多余的如 # 之类的符号），所以，这种路由模式要用好，还需要服务端配置。

import Vue from 'vue' // 引入 Vue
import VueRouter from 'vue-router' // 引入 Vue-router 路由
import Home from '@/views/Home' // 引入要更新跳转的组件页面
import Login from '@/views/Login' // 引入要更新跳转的组件页面

// 使用路由插件
Vue.use(VueRouter)

// 创建 VueRouter 对象
const router = new VueRouter({
  mode: 'hash'或者'history', // 路由模式，可取 hash、history，默认为 hash
  routes: [ // 静态路由的配置信息
    {
      path: '/home', // 当 URL 中访问地址为 /home 时 自定义地址
      component: Home, // 上面引入的要更新跳转的组件页面
    },
    {
      path: '/login',
      component: Login,// 上面引入的要更新跳转的组件页面
    },
  ],
})

// 导出路由对象
export default router

注入 router 到 vue 根实例

**在main.js文件内注入 router

// 引入 router
import router from './router'

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

在 Vue 中使用 VueRouter

VueRouter 提供了两个内置组件：

在主页面使用以下两个组件，一个是用于跳转的链接，一个是用来渲染试图的。

• router-link：链接，相当于 <a>
• router-view：视图，用于渲染访问路径所对应的组件

<template>
  <div id="app">
       <!-- 链接 -->
      <router-link to="/home">首页</router-link>
      <router-link to="/login">登录</router-link> 
       <button @click="todoJump">代办事项</button>
       <!-- 视图 -->
      <router-view></router-view>

  </div>

</template>

编程式导航：

当在 Vue 根实例中注入了 router 后，在 vue 组件中会自动注入如下两个属性：

• $router：代表 VueRouter 对象实例
• $route：代表的是当前激活的路由对象

使用主页面使用 methods 事件处理属性定义函数的方法实现跳转，定义一个事件处理函数用 $router 来访问路由示例就是获取跳转页面的链接地址，然后用在标签里使 v-on 来实现跳转

• push() 这个方法会像向 history或者hash 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL（地址）

• replace() 它和 push（） 很想，唯一不同的是，它不会向 history或者hash 添加历史记录，而且和它的方法名一样替换掉，当前的 history 记录。

• go(n) 这个方法的参数是一个整数，意思是在 history或者hash 记录中向前或者向后退多少步，括号里填写 负数或 正数。

export default {
  name: 'App',
  methods: {
    todoJump () { // 编程式导航
      this.$router.push('/Todo') 
      this.$router.replace('/Todo')

      this.$router.go(n) 
      // 在浏览器记录中前进一步，等同于 history.forward()
      this.$router.go(1) 
      // 后退一步记录，等同于 history.back()
       this.$router.go(-1) 
      // 如果前进或后退的的步数大于浏览器的的历史记录，那就会默默的报错呗
       this.$router.go(100)   
    }
  }
}

代码示例：

<template>
  <div id="app">
       <!-- 链接 -->
      <router-link to="/home">首页</router-link>
      <router-link to="/login">登录</router-link>
       <button @click="todoJump">代办事项</button>
       <!-- 视图 -->
      <router-view></router-view>

  </div>

</template>
<script>
export default {
  name: 'App',
  methods: {
    todoJump () { // 编程式导航
      this.$router.push('/Todo')
    }
  }
}
</script>

路由传参

1. ？ 传参

在字符串链接后面跟上 ? 然后接收参数，当点击跳转页面的时候，导航栏地址上会打印刚才传输的数据。

 methods: {
    todoJump () { // 编程式导航
     
      this.$router.push('/Todo?id=5&titl=测试')
     
         }

2.使用 query 和 params查询字符串传参

• 在编程式导航中 用 query，在事件处理函数中定义要传递的对象数据。
  它传递的数据也可以在导航栏地址后面打印出来。

methods: {
    todoJump () { // 编程式导航
    
      this.$router.push({
        path: '/Todo',
        query: { // 传递查询字符串参数
          id: 100,
          title: '测试',
          price: 99.99,
          amount: 99
        }
      })
      }

• 在<router-link>标签内传参
  首先在标签内部用 query 定义传递的数据

<router-link :to="{ path:'/hon',query:{message:'篮网总冠军',content:'测试'}}">切换</router-link>

然后在跳转组件那边用 $route 使用传递的参数

注意： 可以直接用插值语法的方式调用，也可以用属性接收。

  // 插值语法方式
 <p>{{ $route.query.message }}</p>
 <p>{{ $route.query.content }}</p>

  // 属性接收方式
  created(){
  const msg = this.$rouet.query.message // 接收路由参数

• params 可以替换 query 传参，但必须是命名路由

  // 在标签内定义传递的参数
 <router-link :to="{ name:'Hello',params:{message:'篮网总冠军',content:'测试'}}">切换</router-link>

接收产生并渲染

注意： 在接收数据那边也要把方法换成 params

// 插值语法方式
<p>{{ $route.params.message }}</p>
<p>{{ $route.params.content }}</p>

  // 属性接收方式
  created(){
  const msg = this.$rouet.params.message // 接收路由参数

3.在定义的静态路由中 path 属性后面使用 :id 来定义动态路径参数

  {
      path: '/Todo:id', // 使用 :id 来定义动态路径参数
      name: 'Todo',
      component: TodoApp
    }

在显示页面定义事件处理函数内部用 params 属性来传递参数，写法如下。

methods: {
    todoJump () { // 编程式导航
      this.$router.push({
        name: 'Todo',
        params: { // 用刚才在路由定义的名字来传递参数
          id: 100
        }
      })
    }
}

它也可以在导航栏地址后面显示，也可以定义钩子函数，打印在控制台。