vue3.0+vue-cli4.5+vue-router4.0 配置路由及重定向

首先先下载安装vue-cli4.5

npm install -g @vue/cli

然后创建项目时进入到项目路径下

vue create [项目名]

安装选项选择vue3,接来下安装的步骤就不详细说了
安装完成后打开项目src目录创建一个router.js

image.png

然后在这个js里引入vue-router 下面是代码截图

image.png

上面就是路由的配置项 在vue3.0里面路由的写法跟vue2不太一样
可以看到我在上面做了一个路由重定向参照vue-router官网的案例二，重定向的目标也可以是一个命名的路由
在第一个路由里的redirect对象里指向我的第二个命名的路由name,当然也可以指向第三个路由about
我这个需求做的安卓app+vue混合式开发 所以要重定向项目名；
然后写好router.js在main.js里把路由挂载到vue上，vue3 挂载方法跟vue2不一样了

重点声明下虽然我是src/router/index.js但是这样引入照样可以找到index.js

应该是默认叫index.js 因为我把index.js改成router.js就启动报错了找不到路由了

image.png

番外话 vuex也是同理

image.png

下图是vue-router官网重定向的案例

image.png

可以看到我现在启动项目是在重定向前应该是 http://localhost:3000/
重定向后指向了我的第二个命名的路由 默认打开项目变成了http://localhost:3000/CloudStudy-App

image.png