潮州网站建设推广,wordpress 卢松松主题,企业网站的主要类型,夫妻之间看的视频哔哩哔哩参考资料#xff1a;
参考视频
参考demo及视频资料
VUE之基本部署及VScode常用插件
VUE之基本组成和使用
VUE之Bootstrap和Element-UI的使用
VUE之axios使用#xff0c;跨域问题#xff0c;拦截器添加Token
Vue Router官网 Vue Router说明#xff1a;
说明#xf…参考资料
参考视频
参考demo及视频资料
VUE之基本部署及VScode常用插件
VUE之基本组成和使用
VUE之Bootstrap和Element-UI的使用
VUE之axios使用跨域问题拦截器添加Token
Vue Router官网 Vue Router说明
说明Vue Router用于页面跳转以及灵活的页面嵌套前面讲的VUE固定嵌套版本对应vue2x对应的是vue-router3xvue3x对应的是vue-router4x相关命令
强制安装npm install --force vue-router安装最新版本npm install --vue-router卸载npm uninstall vue-router安装3版本npm i vue-router3 Vue Router的使用
1. 官方说明
打开官网,点击入门可以看到各种插件的使用方式 2. 使用方式
引入插件本人用的是vue2所以引入vue-router3 npm i vue-router3 在main.js 中引入 import VueRouter from vue-router import router from ./router; Vue.use(VueRouter); router, 创建跳转的页面 Test03.vue
templatedivp stylecolor: brown;test03 页面/p/div
/templatescript
export default {}
/scriptstyle/style
在需要跳转替换的地方添加 router-view标签默认显示以及跳转后替换显示 在src文件夹下创建路由规则的js,如文件夹为routerjs为index.js
import VueRouter from vue-router
// 引入组件
import Test01 from ../components/Test01
import Test03 from ../components/Test03
const router new VueRouter({mode:history,routes: [{path: /,component: Test01,name: test01,},{path: /test01,component: Test01,name: test01,},{path: /test03,component: Test03,name: test03,}]
})export default router
关于结构的分析 在默认页添加跳转按钮并添加跳转代码 button clicktrans跳转至Test03页面/buttontrans(){alert(开始跳转);this.$router.push({name:test03})} 运行 npm run serve 即可进行访问 点击跳转
