vue之vue-router的使用

Posted 2020-12-12 caoyu080202201

一、简介

　　1、vue-router是vue.js官方的路由管理器，它和vue.js的核心深度集成，让构建单页面应用变得易如反掌。

　　2、官方文档：https://router.vuejs.org/zh/。

　　3、下载安装：npm i vue-router -S(npm install vue-router --save)。

二、配置路由：

　　1、初始化路由对象，在src目录下创建路由router目录，在router目录下创建路由文件index.js：

// 引入核心组件vue和vue-router，通过vue.use注册vue-router组件
import Vue from ‘vue‘
import Router from ‘vue-router‘
// 导入组件
import Home from "../components/Home";
import Reg from "../components/Reg";
// @代表从src目录开始
import User from "@/components/User";

Vue.use(Router)

// 创建vue-router对象，并抛出到全局，提供给main.js调用
export default new Router({
  // 设置路由模式为 history，否则会以默认的hash执行，如此的话默认情况下url需要加#
  mode: ‘history‘,
  // 路由列表，用于注册一个个的路由
  routes: [
    {
      path: ‘/home‘,  // url路径
      component: Home,  // 组件名
      name: ‘Home‘  // 路由别名
    },
    {
      path: ‘/reg‘,
      component: Reg,
      name: ‘Reg‘
    },
    {
      path: ‘/user/:name/:type‘,  // 带路由参数的url
      component: User,
      name: ‘User‘
    },
  ]
})

View Code

　　2、在main.js中把vue-router对象注册到全局：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘

Vue.config.productionTip = false

/* eslint-disable no-new */

// 导入vue-router组件
import router from ‘@/router/index‘

new Vue({
  el: ‘#app‘,
  components: {App},
  template: ‘<App/>‘,
  // 把vue-router组件注册到全局
  router
})

View Code

　　3、在App.vue中引用路由：

<template>
  <div id="app">
    <!-- 通过router-view引入路由 -->
    <router-view></router-view>
  </div>
</template>

<script>

  export default {
    name: ‘App‘,
    components: {}
  }
</script>

<style>

</style>

View Code

　　4、补充：如果在创建vue项目的时候，已经选择设置安装vue-router，则项目会自动帮我们初始化上面的router目录和index.js文件，以及自动到main.js里面注册vue-router对象。

三、页面跳转与传参


　　1、在全局注册了vue-router组件以后，在全局范围内所有组件里面会创建2个对象给我们使用：

　　　　①this.$router：可用于在js代码中进行页面跳转。

　　　　②this.$route：可用于获取地址栏上面的url参数。

　　2、页面跳转的方式：

　　　　①通过this.$router.push跳转。

　　　　②通过<router-link to=url地址></router-link>或者<router-link :to=url参数></router-link>，实现跳转。

　　　　③通过this.$router.go或者this.$router.back或者this.$router.forward，实现历史记录跳转。

　　3、参数传递：

　　　　①查询字符串(query string)，就是url的?后面的参数，这些参数不影响路径目的地，例如http://www.xxx.yyy.com/user?name=tom&id=111。

　　　　②路由参数(router params)，就是url部分斜杠跟着的参数，这些参数是路径的一部分，例如http://www.xxx.yyy.com/user/tom/111。

　　4、实例：

<template>
  <div>
    <h1>Home页面</h1>
    <button @click="to_reg()">跳转到Reg页面</button>
    <br>
    <button @click="to_bd()">跳转到百度</button>
    <br>
    <button @click="up_11()">返回上一页</button>
    <br>
    <button @click="up_1()">返回上一页</button>
    <br>
    <button @click="down_1()">前往下一页</button>
    <br>
    <router-link to="/reg">跳转到Reg页面</router-link>
    <br>
    <router-link :to="url_reg">跳转到Reg页面</router-link>
    <br>
    <router-link :to="{path:‘/reg‘}">跳转到Reg页面</router-link>
    <br>
    <router-link :to="{name:‘Reg‘}">跳转到Reg页面</router-link>
    <br>
    <router-link :to="url">跳转到Reg页面</router-link>
    <hr>
    <h2>带参数传递的跳转</h2>
    <button @click="to_reg_2()">跳转到Reg页面</button>
    <br>
    <router-link to="/reg?name=tom&age=18">跳转到Reg页面</router-link>
    <br>
    <router-link :to="{path:‘/reg‘, query:{name:‘tom‘, age:18}}">跳转到Reg页面</router-link>
    <br>
    <router-link :to="{name:‘Reg‘, query:{name:‘tom‘, age:18}}">跳转到Reg页面</router-link>
    <hr>
    <router-link to="/user/jan/aaa">跳转到User页面</router-link>
    <br>
    <router-link :to="{name:‘User‘, params:{name:‘jan‘, type:‘aaa‘}}">跳转到User页面</router-link>
  </div>
</template>

<script>
  export default {
    name: "Home",
    data() {
      return {
        url_reg: ‘/reg‘
      }
    },
    methods: {
      to_reg() {
        // 通过this.$router.push跳转指定站内页面，填入url
        // 只能站内跳转，站外跳转还是要用window.location.href
        this.$router.push(‘/Reg‘)
      },
      to_bd() {
        window.location.href = ‘https://www.baidu.com/‘
      },
      up_11() {
        // 通过this.$router.go(n)跳转历史记录，n为正数是前往，n为负数是返回
        this.$router.go(-1)
      },
      up_1() {
        // 通过this.$router.back直接返回上一页
        this.$router.back()
      },
      down_1() {
        // 通过this.$router.forward直接前往下一页
        this.$router.forward()
      },
      to_reg_2() {
        // 传递query string参数
        this.$router.push(‘/reg?name=tom&age=18‘)
      },
    }
  }
</script>

<style scoped>

</style>

View Code

<template>
  <div>
    <h1>Reg页面</h1>
    <h3>收到参数：</h3>
    <p>{{recv_all}}</p>
    <p>{{recv_name}}</p>
    <p>{{recv_age}}</p>
    <p>{{recv_url_name}}</p>
    <p>{{recv_path}}</p>
    <p>{{recv_full_path}}</p>
  </div>
</template>

<script>
  export default {
    name: "Reg",
    data() {
      return {
        recv_all: null,
        recv_name: null,
        recv_age: null,
        recv_url_name: null,
        recv_path: null,
        recv_full_path: null
      }
    },
    created() {
      // 通过this.$route.query接收query string参数
      this.recv_all = this.$route.query
      this.recv_name = this.$route.query.name
      this.recv_age = this.$route.query.age
      // 通过this.$route.name接收路由别名
      this.recv_url_name = this.$route.name
      // 通过this.$route.path接收不含query string参数的路径
      this.recv_path = this.$route.path
      // 通过this.$route.fullPath接收完整路径
      this.recv_full_path = this.$route.fullPath
    }
  }
</script>

<style scoped>

</style>

View Code

<template>
  <div>
    <h1>User页面</h1>
    <h3>收到参数：</h3>
    <p>{{recv_all}}</p>
    <p>{{recv_name}}</p>
    <p>{{recv_type}}</p>
  </div>
</template>

<script>
  export default {
    name: "User",
    data() {
      return {
        recv_all: null,
        recv_name: null,
        recv_type: null,
      }
    },
    created() {
      // 通过this.$route.params接收router params参数
      this.recv_all = this.$route.params
      this.recv_name = this.$route.params.name
      this.recv_type = this.$route.params.type
    }
  }
</script>

<style scoped>

</style>

View Code