一口气拿下vue-router所有知识点，薪资暴涨3000

一 vue路由基础使用【固定路由的配置和使用】

首先我们展示一下router使用后的效果。

首先启动服务后，输入路由http://localhost:8080/#/A，到达页面A，展示页面A内容，点击页面上按钮或者将url切换为http://localhost:8080/#/B，到达页面B，展示页面B内容。

怎样配置

1. 创建两个文件src/views/a.vue和src/views/b.vue，用来展示路由切换效果。

// src/views/a.vue
<template>
  <div>
    <h1>我是页面a</h1>
  </div>
</template>

// src/views/b.vue
<template>
  <div>
    <h1>我是页面b</h1>
  </div>
</template>

2. 创建src/router/index.js文件，在src/router/index.js中引入router必要文件，导出router对象。

src/router/index.js文件代码示例如下。

import Vue from "vue";
import VueRouter from "vue-router";
import a from "../views/a.vue";
import b from "../views/b.vue";

// 注册路由插件
Vue.use(VueRouter);

// 定义路由规则
const routes = [
  {
   
    path: "/B",
    name: "A",
    component: a,
  },
  {
   
    path: "/B",
    name: "B",
    component: b,
  },
];

// 创建router对象
const router = new VueRouter({
   
  routes,
});

export default router;

3. 在src/main.js中，在全局vue实例创建的时候，注入router对象。

src/main.js代码示例如下。

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

这一步做了什么呢，我们可以将vue实例打印出来，看一下router写入前后，vue实例有什么变化。

// src/main.js
const vm1 = new Vue({
   
  router,
  //   store,
  render: (h) => h(App),
}).$mount("#app");

const vm2 = new Vue({
   
  // router,
  //   store,
  render: (h) => h(App),
}).$mount("#app");

console.log(vm1, vm2);

我们写了两个不同的Vue实例，两者唯一的区别是有无注入router，将它们打印出来后对比一下，可以看到，注入router的vue实例中增加了几个router相关的属性，$router和$route属性被赋值。

点击打开后可以看到，$router中有一些路由相关的方法，$route中有当前路由的信息。

这些信息已经挂载到了全局vue实例上，在页面中就可以直接使用了。

4. 在App.vue中对应位置添加<router-view/>标签，该标签为路由组件的占位符，路由切换时，该标签会被替换成对应的路由组件。就达到了我们想要的效果。

在切换路由时，我们可以通过点击<router-link />标签或者手动更改url的方式进行页面切换，下面是一个带有<router-view/>标签和<router-link />标签的代码示例。

这里我们为router-link标签写上了一些样式，使展示更加美观。

<template>
  <div id="app">
    <router-link class="a" to='A'>跳往页面A</router-link>
    <router-link class="b" to='B'>跳往页面B</router-link>
    <router-view />
  </div>
</template>

<style>
.a,.b {
     
 border: 1px solid #42b983;
 padding: 5px 10px;
 margin: 5px;
 margin-top: 300px;
 color: #42b983;
}</style>

怎样控制路由跳转

刚刚介绍了路由在html中使用标签进行跳转，但有时我们希望在js中跳转，该怎样操作呢？这就用到上面挂载在vue实例上的$router。代码示例如下。

this<