vue 3.0 静态路由配置_vue 静态路由设置属性

今天研究了一下vue3.0的静态路由配置，分享一下。

首先我们现在项目中建立router文件夹，如下图所示：

404文件夹存放404页面，components文件夹存放首页界面，config为设置文件夹，diz存放具体的业务逻辑和界面，router存放我们的路由设置js文件，utils存放工具逻辑（之后的组件逻辑等工具类都存放在这李）

其次是main.js文件的配置，这部分配置主要是添加router依赖。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

1
2
3
4
5
6
7

紧接着在建立的router文件夹中新建一个index.js文件，这是我们的路由设置文件。

import { createRouter, createWebHashHistory } from "vue-router"

const routes = [
    {
        path: '/',
        name: 'container',
        component: () => import('@/components/index')
    },
    {
        path: '/test',
        name: 'Text_r',
        component: () => import('@/diz/Text_1')
    },
    {
        path: '/:pathMatch(.*)*',
        hidden: true,
        component: () => import('@/404/NotFound.vue')
    }
]

export const router = createRouter({
    history: createWebHashHistory(),
    routes: routes
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

上述代码中首先引入了vue的路由依赖，设置了首页地址，404界面地址和我们的业务地址。
其中path表示的是页面将要跳转的地址，name表示该页面的name属性，component表示该页面在项目中的位置。
如果要添加新的跳转地址，按照这个逻辑进行配置即可。

最后设置App.vue界面为

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

<script>

</script>

1
2
3
4
5
6
7
8

做完这些后，我们在VUE页面中设置跳转连接

   <router-link  target="_blank" to='/'>
        <div class="top_center">点击我跳转到首页地址 "/" </div>
      </router-link>
1
2
3

或者省略这一步，直接在浏览器中输入跳转地址也可以。

到此我们的静态路由配置进已经完成，这种静态的路由适用于跳转连接不多且不会动态添加的场景，如果由较多的跳转或业务需要动态的添加界面和跳转则需要配置动态路由来处理。