二 网站建设的重要性,广东网站建设公司有哪些,怎么自己做网站怎么赚钱,广州市中智软件开发有限公司作用描述 router-view 标签是用来渲染路由对应的组件的位置#xff1b; 默认情况下#xff0c;一个路由是只对应一个组件的。 但是#xff0c;可以通过给 router-view 指定 name 属性的方式#xff0c;实现同时渲染多个组件的效果。 这也叫做 命名视图。 注…作用描述 router-view 标签是用来渲染路由对应的组件的位置 默认情况下一个路由是只对应一个组件的。 但是可以通过给 router-view 指定 name 属性的方式实现同时渲染多个组件的效果。 这也叫做 命名视图。 注意点 1、因为一个路由需要对应多个组件所以在进行路由配置时需要使用 components 来代替 component; 2、在使用router-view 时指定 name 属性不指定的默认是 default 3、components 中使用 key-value 的形式配置组件 key : 就是 router-view 的 name 属性的值 value : 就是要渲染的组件 路由中的配置就像下面这样 {path:/showAllComponents,name:aroute,components:{ // 指定多个组件default : componentA, // 默认名称 defaultfirst : componentB, // name first 的 router-viewsecond : componentC // name second 的 router-view},},使用案例
项目结构如下
projectName| -- src| -- App.vue # 根组件A B C 三个组件都在这里展示| -- componentA.vue| -- componentB.vue| -- componentC.vue| -- router.ts # 路由配置的文件| -- mian.ts # 程序的入口ts文件| -- index.html # 项目页面入口文件下面的案例代码只展示重点的部分router.ts 路由配置
// 导入 定义路由的两个方法
import {createRouter,createWebHistory} from vue-router// 引入两个组件
import componentA from ./componentA.vue;
import componentB from ./componentB.vue;
import componentC from ./componentC.vue;// 声明路由跳转的路径与组件的对应关系
const routsList [{path:/showAllComponents,name:aroute,components:{default : componentA,first : componentB,second : componentC},},
]// 创建路由的实例对象
const routerConfigObj createRouter({history:createWebHistory(abc), // 带一个参数表示是路由的一个前缀routes:routsList // 指定路由的配置列表
})// 导出路由的对象
export default routerConfigObj;
App.vue 根组件内容
templatediv classbasedivAPP.vue 中的 msg : {{ msg }}brbrbr!-- router-view 进行目标组件的展示 --router-view/router-viewrouter-view namefirst/router-viewrouter-view namesecond/router-view/div/templatescript setup langts// 引入 provide 方法import { ref } from vue// 声明父组件的一个变量const msg ref(这是App根组件的msg变量)/scriptstyle scoped.basediv{width: 600px;height: 400px;border: 1px solid red;}
/style运行效果
