vue3路由的配置

Posted 2021-07-08 fengshaopu

使用 vue3 配置路由，步骤如下

目录：
1.安装路由
2.新建页面
3.新建router文件夹里面放index.js跟router.js：index.js放配置，router设置路由
4.main中导入注册
5.使用
6.效果

1、安装路由

npm install vue-router@4

2、新建页面

这里创建 view目录，然后在view目录下创建 A.vue B.vue 两个 vue页面文件

或者还可以在compoents里面创建

A.vue内容

<template>
  <div>a</div>
</template>

<script>
export default {
  name: '',
  data() {
    return {};
  },
  mounted() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>

B.vue内容

<template>
  <div>b</div>
</template>

<script>
export default {
  name: '',
  data() {
    return {};
  },
  mounted() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>

3、创建路由配置文件

新建 router目录，然后在 router目录下新建 index.js和 routes.js文件

index.js 文件内容如下:

import {createRouter, createWebHistory} from 'vue-router'
import routes from './routes'    //导入router目录下的router.js
 
const router = createRouter({
    history: createWebHistory(),     //路由模式
    routes
})

export default router      //导出

router.js 文件内容如下：

const routes = [
    {
        name: 'a',
        path: '/a',
        component: () => import('@/view/A')
    },
    {
        name: 'b',
        path: '/b',
        component: () => import('@/view/B')
    },
    
];
export default router

3.在main中导入：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
 
//注意use要在mount之前
createApp(App).use(router).mount('#app')

4、添加 router-view

笔者这里为了演示在 app.vue文件中添加，读者可根据自己的情况进行添加

<template>
  
  <router-view></router-view>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'


</script>

<style>

</style>

5.路由切换：

<template>
  
  <router-view></router-view>
  <button @click="$router.push('a')">a</button>
  <button @click="$router.push('b')">b</button>

</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'


</script>

<style>

</style>

6.页面效果：