【vue】路由的搭建以及嵌套路由-Toy模板网

这篇具有很好参考价值的文章主要介绍了【vue】路由的搭建以及嵌套路由。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目的：学习搭建vue2项目基础的vue路由和嵌套路由
1.npm 安装 router

npm install vue-router@3.6.5

2.src下新建文件夹router文件夹以及文件index.js
【vue】路由的搭建以及嵌套路由,vue.js,前端,javascript

index.js

import Vue from 'vue'
import VueRouter from "vue-router"
import Home from '../views/Home.vue'
import User from '../views/User.vue'
import Main from '../views/Main.vue'
Vue.use(VueRouter)
// 1、 创建路由组件
// 2 路由与组件映射
const routes = [
    {
        path: '/', 
        component: Main, 
        children: [
            // 子路由
            { path: '/home', component: Home },
            { path: '/user', component: User },
        ]
    },
    // { path: '/home', component: Home },
    // { path: '/user', component: User },
]
const router = new VueRouter({
    routes
})
export default router

Home.vue User.vue Main.vue 三个页面都是一样的

<template>
    <h1>我是home</h1>
</template>
<script>
export default {
    data() {
        return {}
    }
}
</script>

main.js 挂载

import Vue from 'vue'
import App from './App.vue'
// import ElementUI from 'element-ui';
import { Button, Row } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
Vue.config.productionTip = false
// Vue.use(ElementUI);
Vue.use(Button);
Vue.use(Row);
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

注意：该demo命名方式会导致eslint报错，需要在vue.config.js加入lintOnSave: false

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false // 关闭eslint 校验
})