外贸网站建设十大标准外贸网站建站,中国建设工程造价网站,app的开发需要多少钱,威海网络营销路由的基本使用 文章目录 路由的基本使用01-VueRouterVueRouter的使用 #xff08; 5 2#xff09;综合代码 拓展#xff1a;组件存放问题 什么是路由呢#xff1f; 在生活中的路由#xff1a;设备和IP的映射关系
在Vue中#xff1a;路径 和 组件 的 映射 关系。 01-Vu…路由的基本使用 文章目录 路由的基本使用01-VueRouterVueRouter的使用 5 2综合代码 拓展组件存放问题 什么是路由呢 在生活中的路由设备和IP的映射关系
在Vue中路径 和 组件 的 映射 关系。 01-VueRouter
作用修改地址栏路径时切换显示匹配的组件。VueRouter是Vue官方的一个路由插件是一个第三方包。 VueRouter的使用 5 2
五个基础步骤
① 下载 下载VueRouter 到当前工程版本采用3或者4.
yarn add vue-touter3.6.5②引入
import VueRouter from vue-router③安装注册
Vue.use(VueRouter) //VueRouter插件初始化④创建路由对象
const router new VueRouter()⑤注入将路由对象注入到 new Vue实例中建立关联 router //简写 键是固定的值可以自己创建看到 #/ 就表示成功的注入了VueRouter 2个核心步骤
①创建需要的组件views目录配置路由规则
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-czBC18EO-1693238280996)(D:\桌面\images_md\Snipaste_2023-08-28_23-32-12.png)]
import Find from ./views/Find.vue
import My from ./views/My.vue
import Friend from ./views/Friendconst router new VueRouter({toutes: [{ path: /find, component: Find}{ path: /my ,component: My},{ path: /friend, component: Friend},
]
})②配置导航配置路由出口路径匹配的组件显示的位置
div classfooter_wrapa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a
/div
div classtoprouter-view/router-view
/div综合代码
import Vue from vue
import App from ./App.vue// 路由的使用步骤5 2
// 1. 下载 v3.6.5
// 2. 引入
// 3. 安装注册 Vue.use
// 4. 创建路由对象
// 5. 注入到new Vue中建立关联// 2个核心步骤
// 1. 创建组件配路由规则
// 2. 配置导航配置路由出口同时设置路径匹配组件的显示位置import VueRouter from vue-router
import Find from ./views/Find
import My from ./views/My
import Friend from ./views/Friend
Vue.use(VueRouter) //VueRouter插件初始化const router new VueRouter({// 配置路由规则routes: [{ path: /find, component: Find},{ path: /my, component: My},{ path: /friend, component: Friend},]
})Vue.config.productionTip falsenew Vue({render: h h(App),router //简写 键是固定的值可以自己创建
}).$mount(#app) divdiv classfooter_wrapa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a/divdiv classtop!-- 路由出口 → 路径匹配的组件所展示的区域 --router-view/router-view/div/div 拓展组件存放问题
为什么将路由相关的文件放在 views目录呢
这就得牵扯到我们的组件分类了
组件分类.vue文件
页面组件 配合路由使用的组件放在 views文件夹中复用组件展示数据或者使用率复用高的放在components文件夹中
分类目的就是方便维护
