vue-router使用方法

一、下载router

https://v3.router.vuejs.org/zh/installation.html

方式1、CDN：https://unpkg.com/vue-router@3/dist/vue-router.js
方式2、npm：npm install vue-router@版本号
查看最新版本：https://www.npmjs.com/package/vue-router?activeTab=versions

在src下面创建router，在router下新建index.js

二、引入vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

三、代码配置

1、创建路由组件
在src下面新建views文件夹，在views文件夹下面新建组件文件
如：
Home.vue：

<template>
    <h1>I am Home.</h1>
</template>
<script>
export default {
    data(){
        return{}
    }
}
</script>

User.vue：

<template>
    <h1>I am User.</h1>
</template>
<script>
export default {
    data(){
        return{}
    }
}
</script>

在src/router/index,js中引入创建的views组件：

import Home from '../views/Home.vue'
import User from '../views/User.vue'

2、将路由与组件进行映射
src/router/index,js中：

const routes = [
    { path: '/home', component: Home },
    { path: '/user', component: User }
]

3、创建router实例，传入routes配置

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

向外暴露：

export default router

4、挂载到根节点
main.js
导入：

import router from './router'

（这样写会默认自动识别该路径下的index.js文件）

挂载：

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

5、路由出口，组件渲染
App.vue修改：

<template>
  <div id="app">
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

四、关闭eslink校验

上述修改以后npm run serve会报错：
ERROR in [eslint]
D:\CodeWeb\web\frontend\my-app\src\views\Home.vue
1:1 error Component name “Home” should always be multi-word vue/multi-word-component-names

D:\CodeWeb\web\frontend\my-app\src\views\User.vue
1:1 error Component name “User” should always be multi-word vue/multi-word-component-names

✖ 2 problems (2 errors, 0 warnings)

webpack compiled with 1 error

这时候需要修改项目配置文件vue.config.js：

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

五、效果

六、嵌套路由

1、创建主路由组件
src/views/ 下新建Main.vue：

<template>
    <h1>Main</h1>
</template>
<script>
export default {
    data(){
        return{}
    }
}
</script>

2、引入主路由组件到router
src/router/index.js 修改：
const routes = [
{ path: ‘/home’, component: Home },
{ path: ‘/user’, component: User }
]
改为：

const routes = [
    {
        //主路由
        path: '/',
        component: Main,
        children: [
            { path: '/home', component: Home },
            { path: '/user', component: User }
        ]
    }
]

3、将子路由的出口增加到主路由内
修改Main.vue，增加子路由出口：

<template>
    <div>
        <h1>Main</h1>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</template>

效果：