关于路由的使用

vue2写法

import Vue from "vue"  //引入vue

import Router from 'vue-router'  //引入路由

Vue.use(Router)  //使用路由 //实例化router并配置参数 let router = new Router({ 　　mode:"hash",//模式-分为hash与history，不写默认hash模式 　　//路由具体配置 　　routes:[ 　　　　　{ 　　　　　　name:"home", //名称 　　　　　　path:"/home", //地址  '/'代表根目录下，如不写就地址为父组件path加上自生path 　　　　　　component: () => import(组件路径), //组件地址，此为路由懒加载写法 　　　　　　children:[ 　　　　　　　　//子组件,子组件跟父组件写法一样，也可再套children 　　　　　　　　{   　　　　　　　　　　name:"son", //名称 　　　　　　　　　　path:"/son", //地址  '/'代表根目录下，如不写就地址为父组件path加上自生path 　　　　　　　　　　component: () => import(组件路径), //组件地址 　　　　　　　　} 　　　　　　] 　　　　　}, 　　　　　//找不到路径的重定向 　　　　　{       　　　　path:"*",       　　　　redirect: {           　　　　　　path: "/home" 　　　　　　　} 　　　　　} 　　] }) export default router //导出路由

vue3写法

 //引入路由函数和路由模式函数 import { createRouter, createWebHashHistory/createWebHistory} from 'vue-router';  //实例化router并配置参数 const router=createRouter({     //模式为hash:createWebHashHistory()，模式为history:createWebHistory()     history:createWebHashHistory()/createWebHistory(),  　routes:[  　　　　　{ 　　　　　　name:"home", //名称 　　　　　　path:"/home", //地址  '/'代表根目录下，如不写就地址为父组件path加上自生path 　　　　　　component: () => import(组件路径), //组件地址，此为路由懒加载写法 　　　　　　children:[ 　　　　　　　　//子组件,子组件跟父组件写法一样，也可再套children 　　　　　　　　{   　　　　　　　　　　name:"son", //名称 　　　　　　　　　　path:"/son", //地址  '/'代表根目录下，如不写就地址为父组件path加上自生path 　　　　　　　　　　component: () => import(组件路径), //组件地址 　　　　　　　　} 　　　　　　] 　　　　　}, 　　　　　//找不到路径的重定向 　　　　　{       　　　　path:"/:pathMatch(.*)",//要写成正则表达式的方式，不能写成*了       　　　　redirect: {           　　　　　　path: "/home" 　　　　　　　} 　　　　　} 　　] })   export default router

 

对比：

引用、实例化路由对象对比

import Vue from "vue";import Router from "vue-router";Vue.use("Router");new Router()  变成

import { createRouter, createWebHashHistory/createWebHistory} from 'vue-router'; createRouter()

路由模式对比

mode:hash/history 变成 history:createWebHashHistory()/createWebHistory()

找不到路径的重定向对比

path:"*" 变成 path:"/:pathMatch(.*)"

基本用法没有改变，只在引入创建路由实例、路由模式、重定向的写法上有所调整