1.路由跳转

  1. 添加一个LearnVue.vue文件,
  2. 在router->index.js中 引入import Learn from '@/components/LearnVue'
  3. 在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-路由跳转与路由嵌套的更多相关文章

  1. vue常用操作及学习笔记(路由跳转及路由传参篇)

    路由跳转 - 超链接方式跳转 html: <div id="app"> <h1>Hello App!</h1> <p> <!- ...

  2. Vue学习手记02 - 路由

    1.项目  注意:项目在初始化的时候没有安装vue-router就需要进行安装 2.安装路由: 在项目中使用ctrl+`, 打开终端, 执行如下命令 npm i vue-router -S 或者 cn ...

  3. Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块

    路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...

  4. 路由传值及获取参数,路由跳转,路由检测,this.$route.query和this.$route.params接收参数,HttpGet请求拼接url参数

    配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...

  5. Vue学习手记01-安装和项目创建

    1.安装Vue  注:node版本必须大于等于8.9  vue-cli3.x:npm install -g @vue/cli  vue-cli2.x:npm install -g @vue/cli-i ...

  6. vue学习 ---- 使用vue-router 进行跳转

    前提说明,在学习vue的时候,尽量的以官网的为主,而且框架本身与官方文档都是在不断迭代更新的. 在vue的框架中,目前都是使用vue-router 来进行页面跳转的,而不是<a>.先贴一个 ...

  7. Vue学习手记09-mock与axios拦截的使用

    01.安装 安装mock npm install mockjs 安装axios npm install axios 02.新建一个config.js文件做axios拦截 import axios fr ...

  8. Vue学习手记08-vue-cli的启动过程

    分两种情况---无路由和有路由 无路由 看到启动页面 在文件main.js( vue项目的入口文件)中 这里可以看到,生成了一个全局的vue实例,绑定在了#app上面,也就是在文件index.html ...

  9. Vue学习手记04-跨域问题

    01-安装axios,指令(npm install --save axios)02-解决跨域问题 在config=>中创建一个新的文件proxyConfig.js module.exports ...

随机推荐

  1. linux IPC简单学习

    Posix和system v区别 所谓的IPC(进程间通信)指的是消息队列,共享内存,信号量3种机制合并起来,当然,这是个狭义的概念,只包含这三种.IPC又可以分为system v进程间通信和posi ...

  2. XSS的类型

  3. 运维开发笔记整理-template的使用

    运维开发笔记整理-Django的template的使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在上一篇博客中我们学习了HttpResponse 和JsonResponse方 ...

  4. DOORS 和Reqtify — 需求管理和需求追溯工具

    IBM Rational DOORS 可实现对整个产品的全生命周期需求管理,覆盖从需求.到设计以及测试阶段.是一款具有广泛使用的企业级专业需求管理工具.DOORS 可以将项目开发过程中产生的各级需求和 ...

  5. linux网络编程之posix消息队列

    在前面已经学习了System v相关的IPC,今天起学习posix相关的IPC,关于这两者的内容区别,简单回顾一下: 而今天先学习posix的消息队列,下面开始: 接下来则编写程序来创建一个posix ...

  6. Python Django 版本对应表

  7. ubuntu下卸载旧Mysql并安装新Mysql(升级)

    由于从apt-get下安装的Mysql不是最新版的,所以,需要升级.先卸载,再安装. 1.卸载 先看mysql是否在运行: netstat -tap | grep mysql 然后 sudo apt- ...

  8. 学到了林海峰,武沛齐讲的Day22-完 os sys json pickle shelve XML re

    __ file__    =====   文件路径 os.path.dirname( 路径 )=======到上一层目录 os sys

  9. MongoDB 了解正在进行的操作

    1.1 查看正在进行的操作 使用db.currentOp()函数: >db.currentOp() 1.opid 这是操作的唯一标识符,可以通过它来终止操作 2.active 表示操作是否正在进 ...

  10. Mongodb 分片 手动维护chunk

    去年的笔记 For instance, if a chunk represents a single shard key value, then MongoDB cannot split the ch ...