vue-router配置与使用

---

前言

vue-router就是路由管理,是vue框架的重要的插件之一,接下来我们就讲解它如何被安装使用的,
编译器:VsCode
环境:Vue2

---

一、安装的坑

正常安装就是

npm install vue-router --save

但是!!!
Vue2不兼容最新版本的vue-router,所以利用上面下载的伙伴可以移步我的另一篇解决这个不兼容问题的解决方案
点击这里

二、配置与使用步骤

1.配置

在src文件夹下新建router文件夹,在router文件夹中新建index.js
然后index.js中进行如下配置.

// 导入路由对象
import Router from 'vue-router'
// vue-router是插件所以我们用Vue.use(插件名)来使用插件
Vue.use(Router)
// 创建路由实例和映射文件,映射文件装路由路径,别名,对应的组件,实例用来封装
// 映射文件
const routes = [

]
// 路由实例
const router = new VueRouter({
  // 这里配置的是路由和组件的映射关系, 是一个数组.
  routes
})

// 导出实例router
export default router

main.js配置

import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

新建组件成功后index.js修改

// 导入路由对象
import Router from 'vue-router'
import Vue from 'vue'

// 导入组件
import Test from '../components/Test.vue'
import HelloWorld from '../components/HelloWorld.vue'

// vue-router是插件所以我们用Vue.use(插件名)来使用插件
Vue.use(Router)
// 创建路由实例和映射文件,映射文件装路由路径,别名,对应的组件,实例用来封装
// 映射文件
const routes = [
    {
        path:"/",
        name:"首页",
        redirect:'/test'
    },
    {
        path:'/test',
        name:"测试",
        component:Test
    },{
        path:"/helloworld",
        name:"二维码",
        component:HelloWorld
    }
]
// 路由实例
const router = new Router({
  // 这里配置的是路由和组件的映射关系, 是一个数组.
  routes
})

// 导出实例router
export default router

App.vue中加router-view

<router-view></router-view>

基础配置完事,可以实现跳转
在template里可以通过 <router-link to="/test">首页</router-link>实现路由跳转
在script中可以通过this.router.push(“/test”)实现跳转

---