vue-router 入门

前言

本文简单讲解路由的简单使用，这里会附带一个 Demo 供各位同学进行学习。在线代码入口👉👉(点击传送)

1、起步

Vue Router 属于 Vue.js 的一个核心插件，而插件就必须要进行安装和引入，这里先构建一个标准的 Vue Router 代码结构。

1.1 安装

首先安装一个 Vue Router

npm安装

npm install vue-router

VueCli安装

如果你是用的是 VueCli 构建项目可以直接在构建时选中 Vue Router 选项，或者通过一下代码进行安装

vue add router

1.2 引入

安装完 Vue Router 之后就到了引入的步骤，注意：如果你是使用 VueCli 安装或者添加插件则不需要自己引入，VueCli 会自动帮我们构建好一个标准的 Vue Router 代码结构

新建一个 router 文件夹，并新建一个 index.js 作为路由的主文件

下面进行编码，构建一个简单的路由

新建一个默认页面,命名为 home.vue

<template>
  <div>路由的简单页面</div>
</template>

在 router 目录下的 index.js 文件中输入以下代码，引入 Vue 、Vue Router 和上面构建的简单页面，安装 Vue Router 到 Vue 中，并默认导出构建好的路由。

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入主页面
import home from '../components/home.vue'

// 安装插件
Vue.use(VueRouter)

// 默认导出路由
export default new VueRouter({
    routes:[
        {
            // 路径
            path:'/',
            // 渲染组件
            component: home
        }
    ],
})

接下来在 main.js 中通过router配置注入路由，先引入再注入

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import Myrouter from './router/index'

Vue.config.productionTip = false

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

最后在 App.vue 中配置路由出口即可，所谓路由出口就是将匹配到的组件渲染到的指定位置

<template>
  <div id="app">
    <h1> Vue Router 主页 </h1>
    <!-- 路由出口 -->
    <router-view ></router-view>
  </div>
</template>

启动项目查看效果，因为我们配置匹配路径是 path:'/' 所以程序启动之后会默认将 index.vue 渲染到路由出口位置。

上面我们通过一个简单的例子认识了路由的简单配置，主要是将 Vue Router 安装之后注入到 main.js中Vue实例的router 配置中，程序启动之后会根据配置的路由规则进行组件的渲染，渲染到路由出口 router-view 标签中

2、路由匹配规则

在学习路由导航前，我们先来学习一下路由的匹配规则，这有助于我们理解路由是如何进行匹配的。

2.1 静态路由匹配

在 router 实例中配置 routes 数组，数组中定义一个或多个对象，其对象中的 path 参数为路径匹配，如下：

export default new VueRouter({
    routes:[
        {path:'/home',component: home}
    ],
})

2.2 动态路由匹配

在某种情况下，我们需要某种模式匹配到的所有路由映射到同一个组件，比如路径为 /news/1/新闻1 和 /news/2/新闻1 的路径全部映射到 news 组件。我们就可以通过配置以下动态路由匹配进行实现。 : 标记后面的则为路径参数，每个路径参数都会被设置到 params 中(组件中可以通过 this.$route.params 获取)

export default new VueRouter({
    routes:[
        // 动态路由匹配
        {path:'/news/:id/:name',component: news},
    ],
})

注意：同一个路径可以匹配到多个路由，此时匹配的优先级会按照路由的定义顺序：路由定义越早优先级越高

3、路由导航

路由导航可以理解成跳转页面，而在 Vue Router 中如何跳转页面，一般通过以下两种方法：1、<rorter-link> 标签；2、编程式导航；

以下例子中对应的组件都已经提前定义好了，需要代码的同学可以直接下载 demo 进行验证，demo 链接已经放在文章开头位置

3.1 <rorter-link> 标签

<rorter-link> 标签常用属性

属性	类型	说明
to	string	表示目标路由的链接，点击后内部会传入 to 的值并执行router.push()
replace	boolean	为true时，点击将会执行的 router.replace() 而不是 router.push()
active-class	string	用于设置点击链接激活时的 CSS 类名
tag	string	设置 <rorter-link> 渲染标签，默认为 a 标签

这里先定义路由规则

export default new VueRouter({
    routes:[
        // 新闻
        {path:'/news',component: news},
        // 关于我们
        {path:'/about',component: about},
    ],
})

在 App.vue 中定义两个 <rorter-link> 标签用于路由导航，通过配置 to 属性进行路由匹配， to 属性还可以通过对象的形式传递参数，后面讲到编程式导航时会说到。

<template>
  <div id="app">
    <h1> Vue Router 主页 </h1>
    <nav>
      <router-link class="navItem" to="/news">资讯页面</router-link>
      <router-link class="navItem" to="/about">关于我们</router-link>
    </nav>
    <!-- 路由出口 -->
    <router-view ></router-view>
  </div>
</template>

在设置上 active-class 属性之后，默认值为 .router-link-active ，我们可以通过设置CSS样式来改变匹配成功的样式，这里我们设置成 active ,当激活时将背景上色

// 设置 active-class 属性
<router-link class="navItem" to="/news" active-class="active" >资讯页面</router-link>
<router-link class="navItem" to="/about" active-class="active" >关于我们</router-link>

.active{
  background: rgb(144, 144, 252);
}

我们可以注意到，当我们路径改变之后，可以通过浏览器的回退键返回上一个页面，可是有时候我们不需要这种的操作，就可以通过设置 replace 属性让其覆盖掉上一层路径，而不是不断的push进去。我们将单独设置新闻资讯页面链接的 replace 属性，对比两者的不同。

// 设置 replace 属性
<router-link class="navItem" to="/news" active-class="active" replace >资讯页面</router-link>
<router-link class="navItem" to="/about" active-class="active" >关于我们</router-link>

在主页中，点击资讯页面，再点击浏览器的回退键会发现返回到了新的标签页

在默认情况下 <router-link> 标签渲染出来的是 a 标签，我们可以通过 tag 属性进行设置渲染成我们指定的标签

// 设置 tag 属性为 button
<router-link class="navItem" to="/news" active-class="active" replace  tag="button">资讯页面</router-link>
<router-link class="navItem" to="/about" active-class="active" >关于我们</router-link>

3.2 编程式导航

编程式导航借助 router 实例方法实现，函数如下

函数	说明
push	导航到新的 URL ，并向 history 栈添加一条新记录
replace	导航到新的 URL ，并覆盖当前 history 记录
go	在 history 记录中向前或者向后几步
back	在 history 记录中后退一步
forward	在 history 记录中前进一步

我们直接看看其用法

// 传字符串
this.$router.push('news')
// 传对象
this.$router.push({
    path: 'news'
})
// replace 和 push 传递参数相同
this.$router.replace('about')
//  后退一步
this.$router.go(-1)
//  向前两步
this.$router.go(2)
// 后退一步
this.$router.back()
// 前进一步
this.$router.forward()

:to 属性传递对象和 push 相同

<router-link class="navItem" :to="{path: 'about'}" active-class="active" >关于我们</router-link>

3.2 路由传参

路由传参主要通过 params、query、: 占位符 进行传递

//通过 params 传递参数，在组件中可以通过 this.$route.params 进行数据获取
this.$router.push({
    name: 'news',
    params:{id:'123'}
})

//通过 query 传递参数，在组件中可以通过 this.$route.query 进行数据获取
this.$router.push({
    path: 'news',
    query:{id:'123'}
})

//通过 占位符 传递参数，在组件中可以通过 this.$route.params 进行数据获取
this.$router.push({
    path: `news/${id}`
})

注意：使用 params 属性进行传参必须要用 name 提供一个命名路由
命名路由定义(加上 name 属性即可)：{name: 'test2', path:'/test2', component: test2}, 效果如下：

这篇好文章是转载于：学新通技术网