vue-router路由

官方文档：

router.vuejs.org/zh/

官方文档：

v3.router.vuejs.org/zh/installa…

npm install vue-router@3.1.1  //@后面就是指定的版本号

npm 官方：查找一下相应的依赖

www.npmjs.com/

最新版本：

npm install vue-router@4.3.0

安装完依赖，在package.json的"dependencies"中有"vue-router":"^4.3.0"

router配置

在src文件下新建一个目录router,在router目录下新建一个index.js的文件

在views目录下面增加Home.vue页面

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

在views目录下面增加User.vue页面

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

在views目录下面增加Main.vue页面

<template>
    <div>
        <h1>我是Main</h1>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data(){
        return {}
        }
}
</script>

router.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.将路由与组件进行映射
//3.创建router实例
// 4. 创建和挂载根实例。


const routes = [
    {
    path:'/',
    component:Main,
    children:[
              //子路由也可以称之为嵌套路由
              { path: 'home', component: Home },
              { path: 'user', component: User }
        ]
    }
]


const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})


export default router

// 4. 创建和挂载根实例。（打开main.js）

import Vue from'vue'
import App from'./App.vue'
import ElementUI from 'element-ui';
import router from './router'


Vue.config.productionTip =false
Vue.use(ElementuI)

new vue({
    router,//挂载好啦
    render: h =>h(App),
    }).$mount('#app')

eslint语法报错解决办法

在当前项目中找到vue.config.js文件。

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

App.vue

<template>
    <div id="app">
        <!-- <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button
        </el-row>-->
        <!--路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</template>