vue2和vue3的基础用法对比第二篇

Posted 2021-06-09 DDjans

关于路由的使用

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(.*)"

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