VUE.js的路由(vue-router)及基本使用

一、什么是前端路由

1.1 vue-router 的理解

vue-router是vue .js官方提供的一套专用的路由插件库,专门用来实现 SPA 应用。

1.2 对 SPA 应用的理解

  • 单页 Web 应用(single page web application,SPA)。
  • 整个应用只有一个完整的页面。
  • 点击页面中的导航链接不会刷新页面,只会做页面的局部更新。
  • 数据需要通过 ajax 请求获取。

1.3 什么是路由

一个路由就是一组映射关系(key - value),key 为路径, value 可能是 function 或 component。前端路由的valuecomponent(组件),用于展示页面内容,当浏览器的key(路径)改变时, 对应的组件即页面内容就会相应改变进行页面显示。

VUE.js的路由(vue-router)及基本使用_第1张图片

路由器与路由之间的关系图

1.4 前端路由的使用场景

网站首页界面:

VUE.js的路由(vue-router)及基本使用_第2张图片

 登录界面:

VUE.js的路由(vue-router)及基本使用_第3张图片

 总结:前端路由在访问一个新页面时仅仅改变了一下路径,没有网络延迟、页面无刷新,单页面应用。

二、Vue Router 基本使用

Vue.js官方提供了一套专用的路由工具库Vue Router。由于Vue Router是Vue的一个插件,需要在Vue的全局应用中通过Vue.use( )将它纳入Vue实例中。

2.1 建立路由器模块

在vue-cli创建的项目中,router文件夹下的index.js中配置和绑定相关信息。new Router命令创建一个路由对象,一条路由的实现需要三个部分:name(路由名字),path(路径),component(组件)。

路由配置示例代码(index.js):

import Vue from 'vue'
import Router from 'vue-router'
//将HelloWorld组件引入
import HelloWorld from '@/components/HelloWorld' 

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

 2.2 启动路由器

在vue-cli脚手架创建的项目中,main.js是入口文件,并启动路由器。

main.js代码截图:

VUE.js的路由(vue-router)及基本使用_第4张图片

 App.vue中使用将组件渲染在页面中:

 VUE.js的路由(vue-router)及基本使用_第5张图片

 2.3 路由重定向

项目应用中通常都有一个首页,默认首先打开的是首页,目前我们默认首先打开的地址是http://localhost:8080/#/

我们想要改变这个默认地址,让它默认打开的是首页,http://localhost:8080/#/home,我们可以使用路由重定向完成。

export default new Router({
  routes: [
    {
      path:'/',
     //路由重定向第一种方式
      redirect:'/home'
     //路由重定向第二种方式
      // redirect:{name:'Home'}
      //路由重定向第三种方式
      // redirect:to=>{return 'Home';}
    },
    {
      path:'/home',
      name:'Home',
      component:Home
    },

2.4 路由懒加载

路由懒加载方式:能把不同路由对应的组件分割成不同的代码块,当路由被访问时才加载对应路由,比较高效。语法(例如加载School路由组件):

const School=()=>import('../components/School.vue')

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Student from '@/components/Student'
// 路由普通加载方式
// import School from '@/components/School'
//路由懒加载方式:能把不同路由对应的组件分割成不同的代码块,当路由被访问时才加载对应路由,比较高效
const School=()=>import('../components/School.vue')

2.5  属性详解

组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址,默认渲染为带有正确连接的  标签在页面显示。

to 属性:类型string/location

表示目标路由的链接,该值可以是一个字符串,也可以是动态绑定的描述目标位置的对象。有四种写法,建议用字符串写法,很简单方便。


Home

Home
 

Home
 

Home
 

Home
 

Home

2.6  路由传参

2.6.1 路由的query参数

1.传递参数

 学生管理 

2.接收参数

2.6.2 路由的params参数

1. 配置路由,声明接收params参数

   {
      path:'/student/:id/:title', //使用占位符声明接收params参数
      name:'Student',
      component:Student
    }

2. 传递参数

学生管理

3.接收参数

2.6.3 路由对象属性

 控制台打印route对象属性:

VUE.js的路由(vue-router)及基本使用_第6张图片

this.$route.path

    类型: string

    字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。

this.$route.params

    类型: Object

    一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。

this.$route.query

    类型: Object

    一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 this.$route.query.user == 1,如果没有查询参数,则是个空对象。

this.$route.hash

    类型: string

    当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。

 this.$route.fullPath

    类型: string

    完成解析后的 URL,包含查询参数和 hash 的完整路径。

 this.$route.matched
    类型: Array

      一个数组,包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有一些在 children 数组)。
 

更多路由属性查看官网:API 参考 | Vue Router (vuejs.org)https://router.vuejs.org/zh/api/#component-injected-%E5%B1%9E%E6%80%A7

三、路由的跳转(页面间导航)

3.1 导航到不同的位置(router.push)

注意:在 Vue 实例中,你可以通过 $router 访问路由实例。因此你可以用 this.$router.push

想要导航到不同的 URL,可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。

当你点击  时,内部会调用这个push方法,所以点击  相当于调用 router.push(...) 

VUE.js的路由(vue-router)及基本使用_第7张图片

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

由于属性 to 与 router.push 接受的对象种类相同,所以两者的规则完全相同。

3.2 替换当前位置(router.replace)

它的作用类似于 router.push,唯一不同的是,它在导航时不会向 history 添加新记录,正如它的名字所暗示的那样——它取代了当前的条目。

VUE.js的路由(vue-router)及基本使用_第8张图片

也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true : 

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

 3.3 横跨历史(router.go)

采用一个整数作为参数,表示在历史堆栈中前进或后退多少步,类似 window.history.go(n)

例如:

// 向前移动一条记录,与 router.forward() 相同
router.go(1)

// 返回一条记录,与router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录,静默失败
router.go(-100)
router.go(100)

总结:

router.push 和 router.replace都是路由跳转,区别在于 router.push 会产生历史记录。

你可能感兴趣的:(Vue开发,vue.js,前端,vscode,前端框架)