vue-router的使用方式

vue-router的使用过程：

​ 一.创建vue-router组件

1

一般使用vue-router的组件都是视图级别的，也就是由多个组件组成，为了区分router组件与常规的小组件components，我们创建与components同等级的新文件夹：views，用于存放相关的router组件。

​ 二.配置vue-router相关路由信息

1

1.创建与views，main.js同级别的router文件夹，用于存放router的配置信息index.js。

​ 2.在index.js中，我们首先需要引入通过安装好的vue-router插件，由于我们需要使用到全局的Vue框架，通过Vue.use(VueRouter)来完成对vue-router的应用，所以我们还需要引入vue，由于我们在路由中需要对views中的组件进行注册,所以我们仍然需要将所有的views组件进行引入

​ 也就是说，在逻辑层面我们需要引入（import）：

​ a.vue

​ b.vue-router

1

c.所有使用到的组件

1
2
3
4

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home.vue";
import About from "../components/About.vue";

​ 3.通过Vue.use(VueRouter)整合Vue与插件vue-router

1
2

//1.通过Vue.use(插件),安装插件
Vue.use(VueRouter);

​ 4.书写配置数组routers的配置，数组中每个元素均为json对象，基本用法为：

1
2
3
4
5
6
7
8

const routers=[{
name:'name'

path:'···'

component:componentName

}]

​ 5.通过调用VueRouter的构造函数，将routers数组作为参数{}创建vue-router对象，实现vue-router的实例化。

1
2
3
4
5

//2.创建vue-router对象
const router = new VueRouter({
  //配置路由和组件之间的映射关系
  routes
});

​ 6.将定义好的router对象导出。

1
2

//4.将定义好的vue-router对象导出
export default router;

​ 7.在main.js中，导入定义好的router对象。

1
2

//5.引入router对象
import router from './router'

​ 8.在main.js中，在app的vue实例中，挂载router:router属性，实现vue-router的使用。

完整代码：

1
2
3
4
5

new Vue({
  //6.挂载router对象
  router,
  render: h => h(App)
}).$mount('#app')

​ 三.使用vue-router，应用路由

​ 在App.vue中，在合适的需要使用到路由的位置添加内置的`<router-link>```组件，并且指定组件的to属性（后接path路由路径）。然后在需要展示路由view组件的位置，使用```<router-view>`组件，完成对router的应用。

注意：`<router-link>```组件会被编译为a标签，而```<router-view>`会被定义的组件完全代替（起到占位的作用，类似slot)