vue路由使用全流程

1.下载vue-router模块到当前工程;

npm i [email protected]

2.vue.config.js中配置devserver{open:true;}

3.在src文件里面创建router文件夹,里面设置index.js

4.在index.js中引入VueRouter函数

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

5.导入各个页面组件

import Login from './views/login.vue'

6.配置路由规则数组:路径和组件名一一对应;

7.把路由规则数组赋值一个变量router,此时router就是一个路由对象

8.在main.js中引入VueRouter函数

import Vue from 'vue'

import VueRouter from 'vue-router'

9.把VueRouter添加到Vue.use(VueRouter)身上,下载VueRouter插件,并注册全局的RouterLink和RouterView组件;

Vue.use(VueRouter)

10.把路由对象注入到new Vue实例中;

11.用router-view作为挂载点,切换不同的路由组件

相当于是占位符,当用户请求一个路径时,将对应组件替换到此处