vue-router 配置

1. 安装

    npm install vue-router --save

    vue2 会有版本兼容问题：npm install vue-router@3.5.2

2. 配置

    在src文件夹下新建router文件夹,在router文件夹中新建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
    },
]
// 路由实例
const router = new Router({
  // 这里配置的是路由和组件的映射关系, 是一个数组.
  routes
})

// 导出实例router
export default router

App.vue中加router-view

<router-view></router-view>

路由跳转：https://blog.csdn.net/weixin_52053631/article/details/130176315

参考网址：https://blog.csdn.net/lplovewjm/article/details/130929578