vue2.0和vue3.0的区别

#Vue2.0Vue3.0
安装npm install -g vue-clinpm install -g @vue/cli
项目创建vue init webpack 项目名vue create 项目名(项目名需小写)
运行npm run devnpm run serve
配置webpack.config.js(自动添加)vue.config.js(手动添加)
路由模式配置const router = new VueRouter({mode:“history”, routes:[…]})

Vue2.0的路由模式配置

	const router = new VueRouter({
	mode:"history",   //默认hash模式
	routes:[...]
})

Vue3.0下vue-router4.0的路由模式配置

import { createRouter, createWebHistory,createWebHashHistory} from 'vue-router'
const router = createRouter({
  // history: createWebHashHistory(),    默认hash模式
  history: createWebHistory(process.env.BASE_URL), // history模式
  routes
})

Vue2.0插件的引入和使用方式
在这里插入图片描述

Vue3.0插件的引入和使用方式
在这里插入图片描述
Vue2.0 所有错误页面路由匹配页面

import Error from './views/Error.vue'
{
    path: '*',
    name: 'error',
    component: Error
 },

Vue3.0 所有错误页面路由匹配页面

 {
    // vue3.0 所有错误页面路由匹配页面
    path: '/:pathMatch(.*)*',
    name: '404',
    component: () => import('../components/ErrorPage.vue')
    // children:[
    //   //错误路由重定向到商品页
    //   {path: "/:pathMatch(.*)*",redirect:'/togglecontent'}
    // ]
  }

在这里插入图片描述
在这里插入图片描述

未完待续。。。。

相关推荐
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页