vue路由（vue-router）的基础配置

这是我参与更文挑战的第7天，活动详情查看： 更文挑战”

开始

vue-router在使用有两种配置方式，第一种就是直接在文件创建的时候使用cli工具直接创建。这种方式无疑是最方便的，他会在 创建的时候一并生成配置文件，直接使用就好。而我们要讲的是，通过自己手自己搭建一个。

安装

npm install vue-router
复制代码

这时候 我们就需要动手 创建一个router.js文件了，并引入 路由

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
复制代码

接下来 我们需要定义一个 路由组件

const home = import("../views/home/Home.vue");  //1.将组件映射到 路由当中
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 也可以只是一个组件配置对象。

const router = [
    {
    path: "/home",
    component: Home,
  },
]
、、创建路由实例
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;  //导出路由
复制代码

这时 我们 就可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由

这里 我直接拷贝一份 官方的案例

// Home.vue
export default {
  computed: {
    username() {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}
复制代码

router-link

router-link和router-view 和vue-router组使用

<router-link>组件的属性有： to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class。 主要功能：支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，会自动生成一个 .router-link-active的 css类名。 router-view则是将html文本进行渲染一般和<router-link>搭配使用的