Vue学习手记03-路由跳转与路由嵌套
1.路由跳转
- 添加一个LearnVue.vue文件,
- 在router->index.js中 引入import Learn from '@/components/LearnVue'
- 在touter中添加路由说明
export default new VR({
routes:[
{
path:"/hello",
name:"HelloWorld",
component:HelloWorld
},
{
path:"/learn",
name:"Learn",
component:Learn
}
]
})
4.在需要切换的地方使用标签router-link
<ul>
<router-link tag="li" to="hello"> hello</router-link>
<router-link to="learn"> learn</router-link>
</ul>
属性:
- to="hello"指定跳转的路由页面
- tag 可以用于指定router-link标签的渲染标签,tag="li"就是安装li的标签样式来渲染。
2.动态路由(参数传递)
/:id 多个参数就 /:id/:name
3.路由嵌套
01.引入子路由后
02.在创建路由时,添加一个children ,多级嵌套就添加多个children
export default new VR({
routes:[
{
path:"/hello",
name:"HelloWorld",
component:HelloWorld
},
{
path:"/learn",
name:"Learn",
component:Learn,
children:[
{
path:"base",
component:Base
}
]
}
]
})
03跳转的地方:to="/Learn/Base"这个要写全,不能只写Base
<router-link tag="li" to="/Learn/Base"> Base </router-link>
Vue学习手记03-路由跳转与路由嵌套的更多相关文章
- vue常用操作及学习笔记(路由跳转及路由传参篇)
路由跳转 - 超链接方式跳转 html: <div id="app"> <h1>Hello App!</h1> <p> <!- ...
- Vue学习手记02 - 路由
1.项目 注意:项目在初始化的时候没有安装vue-router就需要进行安装 2.安装路由: 在项目中使用ctrl+`, 打开终端, 执行如下命令 npm i vue-router -S 或者 cn ...
- Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块
路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...
- 路由传值及获取参数,路由跳转,路由检测,this.$route.query和this.$route.params接收参数,HttpGet请求拼接url参数
配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...
- Vue学习手记01-安装和项目创建
1.安装Vue 注:node版本必须大于等于8.9 vue-cli3.x:npm install -g @vue/cli vue-cli2.x:npm install -g @vue/cli-i ...
- vue学习 ---- 使用vue-router 进行跳转
前提说明,在学习vue的时候,尽量的以官网的为主,而且框架本身与官方文档都是在不断迭代更新的. 在vue的框架中,目前都是使用vue-router 来进行页面跳转的,而不是<a>.先贴一个 ...
- Vue学习手记09-mock与axios拦截的使用
01.安装 安装mock npm install mockjs 安装axios npm install axios 02.新建一个config.js文件做axios拦截 import axios fr ...
- Vue学习手记08-vue-cli的启动过程
分两种情况---无路由和有路由 无路由 看到启动页面 在文件main.js( vue项目的入口文件)中 这里可以看到,生成了一个全局的vue实例,绑定在了#app上面,也就是在文件index.html ...
- Vue学习手记04-跨域问题
01-安装axios,指令(npm install --save axios)02-解决跨域问题 在config=>中创建一个新的文件proxyConfig.js module.exports ...
随机推荐
- linux IPC简单学习
Posix和system v区别 所谓的IPC(进程间通信)指的是消息队列,共享内存,信号量3种机制合并起来,当然,这是个狭义的概念,只包含这三种.IPC又可以分为system v进程间通信和posi ...
- XSS的类型
- 运维开发笔记整理-template的使用
运维开发笔记整理-Django的template的使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在上一篇博客中我们学习了HttpResponse 和JsonResponse方 ...
- DOORS 和Reqtify — 需求管理和需求追溯工具
IBM Rational DOORS 可实现对整个产品的全生命周期需求管理,覆盖从需求.到设计以及测试阶段.是一款具有广泛使用的企业级专业需求管理工具.DOORS 可以将项目开发过程中产生的各级需求和 ...
- linux网络编程之posix消息队列
在前面已经学习了System v相关的IPC,今天起学习posix相关的IPC,关于这两者的内容区别,简单回顾一下: 而今天先学习posix的消息队列,下面开始: 接下来则编写程序来创建一个posix ...
- Python Django 版本对应表
- ubuntu下卸载旧Mysql并安装新Mysql(升级)
由于从apt-get下安装的Mysql不是最新版的,所以,需要升级.先卸载,再安装. 1.卸载 先看mysql是否在运行: netstat -tap | grep mysql 然后 sudo apt- ...
- 学到了林海峰,武沛齐讲的Day22-完 os sys json pickle shelve XML re
__ file__ ===== 文件路径 os.path.dirname( 路径 )=======到上一层目录 os sys
- MongoDB 了解正在进行的操作
1.1 查看正在进行的操作 使用db.currentOp()函数: >db.currentOp() 1.opid 这是操作的唯一标识符,可以通过它来终止操作 2.active 表示操作是否正在进 ...
- Mongodb 分片 手动维护chunk
去年的笔记 For instance, if a chunk represents a single shard key value, then MongoDB cannot split the ch ...