您现在的位置是：网站首页> 编程资料编程资料

Vue路由配置方法详细介绍_vue.js_

2023-05-24 241人已围观

简介 Vue路由配置方法详细介绍_vue.js_

手动配置Vue-router环境

1、下载包： npm i vue-router --save或者 npm i vue-router --S 或者用cdn引入

2、创建路由的js文件（路由、子路由、重定向、开启history模式）

createRouter、createWebHistory

//路由文件 import { createRouter, createWebHistory } from 'vue-router' //将createRouter、createWebHistory引入vue const routes = [ { path: '/', //配置默认路由 name: 'home', //路由名 component: () => import("../views/home.vue"), //引入该路由使用的组件 }, { path: '/a', name: 'a', component: () => import('../views/a.vue'), redirect: '/a/son1', children:[ //配置子路由 { path: '/a/son1', //子路由路径前边必须写父路由路径 name: 'ason1', component: ()=>import("../views/a-son1.vue") } ] }, { path: '/b', name: 'b', component: () => import('../views/b.vue'), redirect: '/b/son1', //重定向，进入/b路由时默认进入/b/son1 children:[ //配置子路由 { path: '/b/son1', //子路由路径前边必须写父路由路径 name: 'bson1', component: ()=>import("../views/b-son1.vue") } ] } ] const router = createRouter({ //设置为history模式 history: createWebHistory(), routes }) export default router

3、将配置的路由js文件引入到main.js中

import { createApp } from 'vue' import App from './App.vue' const app=createApp(App) import router from "./router/index.js" //引入配置路由文件 app.use(router)//记得在mount之前调用 app.mount('#app')

4、界面中使用router-view标签显示路由