携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

参考：Vue Router

下一篇：vue--编程式导航到导航守卫

获取练习完整代码 gitee.com/cj_23756590…

概述

Vue Router 是 Vue.js的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue.js 的过渡系统提供的过渡效果
细致的导航控制
自动激活 CSS 类的链接
HTML5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码

创建项目

使用 vue-cli 创建项目

终端执行 vue create test[项目名]，根据需求选择一下自己的配置项，下面是我的配置项。

安装完成后，就可以得到这样一个目录结构，如果目录结构不一样，可能时配置项不一样，因为要演示 router ，所以必须要安装 router。

终端执行 npm run serve ，就可以运行刚创建的这个项目。

运行成功访问 http://localhost:8080/

通过切换路由显示不同的页面

创建路由

首先创建一个 login组件，在 src/views 下新建一个 LoginView.vue 文件，添加如下代码：

<template>html
  <div>
    <input type="text" name="account" v-model="account" placeholder="account" />
    <input
      type="password"
      name="password"
      v-model="password"
      placeholder="password"
    />
    <input type="button" value="提交" />
  </div>
</template>

在 router/index.js 文件中

//引入这个组件
import LoginView from "../views/LoginView.vue";


const routes = [
    //在routes中添加路由
    {
        path: "/login",
        name: "login",
        component: LoginView,
    },
]

在浏览器中访问 http://localhost:8080/#/login 就可以访问刚才创建的组件了。

router-link

切换/跳转路由的标签，通过 to 属性指定目标地址，默认渲染成 a 标签，通过 tag 属性设置成别的标签。路由链接会有一个默认的 css 类名。

to属性

是一个必填属性，指定目标路由的地址，被点击时把 to 的值传到 router.push()，可以是字符串或对象。

在 App.vue 中添加如下代码：

<!-- 字符串写法 -->
<router-link to="/login">login</router-link>

<!-- 对象写法 -->
<router-link :to="{ path: 'login' }">login</router-link

<!-- 给home页面传递数据 -->
<router-link
 :to="{
      path: 'home',
      name: 'home',
      params: { name: 'jiaji' },
      query: { age: 20 },
      }"
 >Home</router-link
>

path：指定路径

name：链接到命名路由

params：传递的数据不会在地址栏显示

query：传递的数据会在地址栏显示

tag属性

<router-link to="/about" tag="button">About</router-link>

把 about 组件链接标签变成 button 标签，在 Vue Router 4. 中已经被移除，可以使用 v-slot 替代。

replace属性

设置 replace 属性被点击时，会调用 router.replace() 方法，路由跳转后不会留下 history 记录。

<router-link to="/about" tag="button" replace>About</router-link>

append属性

跳转的指定路径会变成：设置的 base路径拼接上路由的相对路径。

active-class

链接激活时默认的 css 类名。可以通过 linkActiveClass 全局配置。

router-view

<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。

name属性/命名视图

如果 <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件。

有时候想同级展示多个视图，而不是嵌套展示，有一个菜单列表，每个列表对应自己的内容。就可以给每个视图命名。如果 router-view 没有设置名字，那么默认为 default。

index.js

{
    path: "/",
    name: "home",
    components: {
        home: HomeView,
        about: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
        login: LoginView,
    },
},

App.vue

<router-view name="home"></router-view>
<router-view name="about"></router-view>
<router-view name="login"></router-view>

重定向和别名

在 routers 中配置 redirect 属性，可以是字符串、对象和方法。

假设现在用户访问了一个路由中不存在的页面，可以重定向404页面

const router = new VueRouter({
  routes: [
    { path: '/*', redirect: '/404' }
    //{ path: '/*', redirect: {name: '404'} }
    //{ path: '/*', redirect: () => {name: '404'} }
  ]
})

访问NotFound路径实际访问的是404组件中的页面

routes:[
	path:'/404',
	name:'404',
	component:'404',
	alias:'NotFound'
]

路由组件传参

布尔模式

通过设置 props 为 true，route.params中的值将会被挂载到实例的 data 中。

在 login 组件中：

<!-- 给按钮绑定事件 -->
<input type="button" value="提交" @click="login" />

//事件方法
login() {
    //路由跳转到home页面
    this.$router.push({
        name: "home",
        //将数据绑定到params对象上
        params: {
            account: this.account,
            password: this.password,
        },
    });
},

index.js中

{
    path: "/",
    name: "home",
    props: true,
    component: HomeView,
},

对象模式

对于有命名视图的路由，可以分别设置props的布尔值：

{
    path: "/",
    name: "home",
    props: {home: true, about: false, login: false},
    component: HomeView,
},

函数模式

{
    path: "/",
    name: "home",
    props: (route) => {
      return {
        account: route.params.account,
        password: route.params.password,
      };
    },
    component: HomeView,
},

vue--从创建vue项目到路由基础

概述