vue3配置router路由并实现页面跳转

0、首先的首先，安装vue-router

用vue3需要安装版本4.0以上的vue-router，安装命令：npm install vue-router@next --save

vue2尽量安装4.0以下版本，安装命令：npm i vue-router@3.1.3

否则可能会报编译错误：export 'default' (imported as 'VueRouter') was not found in 'vue-router'

在package.json中可以查看vue-router版本号：

1、根目录下新建router文件夹，下面新建index.js文件

 文件中引入vue方法、配置页面具体路径

为保证代码整洁，可以将routes=[{…}]部分提取到另一js文件；或通过api动态加载路由

vue2和vue3的代码有些许不同，请注意分辨：

【vue3】

【vue2】

PS：配置history有两个可选方法：createWebHashHistory、createWebHistory

使用前者地址栏的路由会带上#，如下图。换成后者就没有#

2、main.js文件中引入路由

3、app.vue中添加路由组件router-view（划重点）

如果不添加，路由会发生变化，但页面无响应

4、设置页面跳转事件

 5、此时已经可以实现点击跳转，引发其他思考：

（1）路由页面是在router-view的位置渲染，所以可将导航栏引入到app.vue中<router-view>上方做固定显示

 

【 附上代码】

router / index.js

import { createRouter, createWebHistory } from 'vue-router'
// import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes'


const router = createRouter({
    routes:routes,
    history:createWebHistory(process.env.BASE_URL)
})

export default router

router / routes.js

const routes = [
    { path:'/', redirect:'/home' }, // 默认路径重定向至首页
    { path:'/home', name:'home', component: () => import('@/views/Home/index.vue') },
    { path:'/shopfloor/collectionFile', name:'collectionFile', component: () => import('@/views/CollectionFile/index.vue') },
    { path:'/shopfloor/powerPanel', name:'powerPanel', component: () => import('../views/PowerPanel/index.vue') },
]

export default routes

/shopfloor/