Vue-VueRouter 使用

2022-11-06
广东
本文字数：2415 字
阅读完需：约 8 分钟

前言

router 翻译过来就是路由的意思，什么是路由？路由就是通过互联网的网络把信息从源地址传输到目的地址的活动，那什么是 vue-router？

官方说法是：Vue Router 是前端路由，也是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举，功能包括：嵌套路由映射，动态路由选择，路由参数、查询、通配符等等，在 vue-router 的单页面应用中，页面的路径的改变就是组件的切换

安装路由

我们要使用路由就要先安装路由，在脚手架创建项目的时候可以为我们自动创建，也可以手动通过 npm 下载

npm install vue-router --save

复制代码

配置

脚手架创建路由时已经为我们自动配好了，手动下载的需要自己配置。创建 router 文件夹->创建 index.js

import Vue from 'vue'import VueRouter from 'vue-router'
Vue.use(VueRouter)
//创建路由对象const routes = [  ]
const router = new VueRouter({  routes})
//导出路由对象export default router

复制代码

main.js 引入

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

复制代码

vue-router 的基本使用

创建路由组件

创建两个 vue 文件，分别写入一些东西

//Home.vue文件<template>  <div>    <h2>home页面</h2>  </div></template>
//About.vue文件<template>  <div>    <h2>about页面</h2>  </div></template>

复制代码

配置路由映射

在路由对象里配置路由映射关系

import Home from '@/components/Home'import About from '@/components/About'
const routes = [//一个映射关系就是一个对象  {    path:'/home',    component:Home  },  {    path:'/about',    component:About  },]

复制代码

使用路由`<router-link>`和`<router-view>`

<router-link>本质上是一个 a 标签，用于跳转，在<router-link>有个 to 属性，用于跳转的路径，将页面路径设置为刚刚配好的映射关系里的 path

<router-view>是一个容器，它渲染的组件是你使用 vue-router 指定的。会根据当前的路径，动态渲染出不同的组件

<template>  <div id="app">    <router-link to="/home">Home</router-link>    <router-link to="/about">About</router-link>    <router-view></router-view>//渲染出来的组件放在这个位置，替代<router-view>标签  </div></template>

复制代码

可以看见点击标签展示出来的组件发生了变化，右上角的路径就是路由对象里映射关系的 path

配置路由默认路径

一般情况下都会有一个默认页面的，但是上面需要点击才会显示出来内容，所以要在 router 里新增一个映射，path 配置的是根路径/，redirect 是重定向的意思，我们将根路径重定向到/home 的路径下，这样页面就默认展示/home 组件里的内容出来

{    path:'/',    redirect: '/home'},

复制代码

重新进入页面默认展示/home 组件内容

`<router-link>`的其他属性

<router-link>除了 to 属性还有其他的属性：

tag：<router-link>默认是一个 a 标签，可以指定<router-link>渲染成其他元素，例如设置 tag 属性为 button

2.replace：replace 不会留下 history 记录，指定 replace 情况下，后退键不能返回到上一页页面中

3.active-class当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个 router-link-active 的 class，设置 active-class 可以修改默认的名称（不常用）

通过代码跳转路由

除了标签跳转还有其他方法跳转路由嘛？vur-router 为我们提供了一个方法this.$router.push(路由路径)，这样就可以通过代码的方式来跳转路由

<button @click="goHome">Home</button><button @click="goAbout">About</button><router-view></router-view>
goHome(){  this.$router.push('/home')},goAbout(){  this.$router.push('/about')},

复制代码

动态路由的使用

当我们有一个商品的组件，我们需要让不同的商品 id 都映射到这个组件中，该怎么办呢？难道创建多个不同 id 的映射吗，此时就需要用到动态路由了，动态路由就是把匹配某种模式下的路由映射到同个组件中，本质就是通过 url 进行传参

在配置映射的时候 path 使用：动态绑定参数

path:'good/:goodsID'

复制代码

跳转时拼接上参数

<router-link to="/good/001" tag="button">Good</router-link>

复制代码

但是在开发中这个参数一般是动态的，在 data 里定义一个 goodId，在动态拼接上参数，就可以实现上图效果

data(){    return {        return:'001'    }}
<router-link :to="'/good/'+goodId" tag="button">Good</router-link>

复制代码

如果想获取这个 id 展示出来，可以使用$route对象，这个$route对象和$router是不同的，一个用来获取路径上的参数的，一个实现页面之间的跳转

//good组件<div>    <h2>good页面</h2>    {{goodid}}</div>
computed: {    goodid(){        return this.$route.params.goodsID    }}

复制代码

传递参数的方式

传递参数的方式除了 params 还有 query

params 的类型：配置路由格式/router/:id，传递的方式就是在 path 后面跟上对应的值，获取参数方式为 $route.params

query 的类型：配置路由格式/router，传递的方式是在对象中使用 query 的 key 作为传递方式，传递后形成的路径/router?id=123，获取参数方式为 $route.query

//params传参 标签和代码方式<router-link :to="'/good'+id" tag="button">Good</router-link>transmit(){    this.$router.push('/good'+id)}
//query传参 标签和代码方式<router-link :to="{path:'/good',query:{id:'002'} }" tag="button">Good</router-link>
transmit(){    this.$router.push({        path:'good',        query:{            id:'002'        }    })}

复制代码

嵌套路由

在开发中会经常遇到路由嵌套路由，嵌套路由的关键属性是 children，children 也是一组路由，children 可以像 routes 一样的去配置路由数组：

{    path:'/good',    component:Good,    children:[        {            path:'/good/good_item',            component:Good_item        },    ]}
<div>    <h2>good页面</h2>    <router-view></router-view></div>

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/79af3740e055d1d05d2daf1e5】。文章转载请联系作者。

格斗家不爱在外太空沉思

关注

还未添加个人签名 2022-11-01 加入

还未添加个人简介

发布

暂无评论

创作场景

Vue-VueRouter 使用

前言

安装路由

配置

vue-router 的基本使用

创建路由组件

配置路由映射

使用路由<router-link>和<router-view>

配置路由默认路径

<router-link>的其他属性

通过代码跳转路由

动态路由的使用

传递参数的方式

嵌套路由

格斗家不爱在外太空沉思

评论

使用路由`<router-link>`和`<router-view>`

`<router-link>`的其他属性