目的：學(xué)習(xí)搭建vue2項(xiàng)目基礎(chǔ)的vue路由和嵌套路由
1.npm 安裝 router
npm install vue-router@3.6.5
2.src下新建文件夾router文件夾以及文件index.js
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、 創(chuàng)建路由組件
// 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 三個(gè)頁(yè)面都是一樣的
<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命名方式會(huì)導(dǎo)致eslint報(bào)錯(cuò)，需要在vue.config.js加入lintOnSave: false文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-563599.html
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false // 關(guān)閉eslint 校驗(yàn)
})
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-563599.html
到了這里，關(guān)于【vue】路由的搭建以及嵌套路由的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
