vue router命名路由与视图
2023-09-11 14:19:18 时间
vue router命名路由与视图
一、命名路由
1.1 name
{
path:'/user/:id',
name:'user',
component:User,
}
1.2 html方式–router-link
方式1
<router-link to="/user/123">Go to User</router-link>
方式2
<router-link :to="{name:'user',params:{id:369}}">Go to User</router-link>
1.3 js方式–router.push
this.$router.push({name:'user',params:{id:1234}})
二、命名视图
2.1 新建2个视图
ShowMain.vue
<template>
<h2>showMain</h2>
</template>
ShowSide.vue
<template>
<h2>showSide</h2>
</template>
2.2 配置路由器index.js
其中 component 修改成components
const routes = [
{
path: '/',
components: {
default:Home,
ShowMain,
ShowSide,
}
},
]
2.3 配置App.vue
router-view name=‘指定渲染位置’
<router-view></router-view>
<router-view name="ShowMain"></router-view>
<router-view name="ShowSide"></router-view>
相关文章
- Vue_(Router路由)-vue-router路由的基本用法
- Vue - 路由守卫使用
- Vue - 定义使用组件
- vue-router动态路由控制
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- vue.js3: 用pdf-lib给pdf文件添加中文字体水印(pdf-lib@1.17.1 / vue@3.2.37)
- vue.js 3.0.5:用vue-i18n开发i18n国际化功能(vue-i18n@9.2.0)
- 如何给一个vue项目重命名(vue.js 3.2.4)
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue] Preload Data using Promises with Vue.js and Nuxt.js
- vue.js3:父组件子组件互相访问数据方法(vue@3.2.37)
- centos7 minimal运行vue项目npm run serve时报错:Error: spawn xdg-open ENOENT --解决办法:yum install xdg-utils
- vue事件修饰符:通过@click.prevent 阻止事件的默认行为
- vue商城项目开发:浏览器自动访问、路由样式修改及定义和导入组件
- vuejs单文件组件:安装 webpack 和 vue-cli
- vue 导航守卫与 jq 导航拦截器的介绍
- vue脚手架搭建2022年6月版本(保姆级-直接到路由使用)
- Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
- vue-router路由实现页面的跳转
- Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
- Vue实现刷新当前路由
- Vue中vue-i18n结合vant-ui实现国际化
- 057:vue+openlayers地图图像的滤镜处理(示例代码)
- RequireJS 也可以引入 VUE
- 基于Java+SpringBoot+Vue企业资源规划系统设计与实现
- Vue学习笔记——Vue组件化编程
- Vue 组件的定义、组件的使用、什么是路由、路由的定义和使用、nrm的安装使用