Vue学习手记03-路由跳转与路由嵌套

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>

原文地址:https://www.cnblogs.com/somethingWithiOS/p/11185062.html

时间: 2024-09-29 20:54:43

Vue学习手记03-路由跳转与路由嵌套的相关文章

react做路由跳转,路由传参 &#340936;

原文: http://blog.gqylpy.com/gqy/496 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

VUE学习--路由跳转方式||路由跳转携带参数方式||目标路由接受参数方式

跳转方式1:.使用便签跳转, <router-link to="{path:'路由地址',params:{传的数据},query:{传的参数}" >:跳转方式2:导航跳转,{在路由内 (路由对象) router.push({ path:'路径',//具有导航功能 name:‘路由名称’,,//同样具有导航功能 params:{传的数据}, query:{传的参数}"});在组件内 (路由对象)this.$router.push(参数同上); 传参方式1:query

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

前提说明,在学习vue的时候,尽量的以官网的为主,而且框架本身与官方文档都是在不断迭代更新的. 在vue的框架中,目前都是使用vue-router 来进行页面跳转的,而不是<a>.先贴一个vue-router学习的官方文档   https://router.vuejs.org/zh-cn/essentials/getting-started.html 事实上,使用vue-router  进行页面跳转一共有3种方式.这里我就先用一个demo进行说明一下. 一.demo准备工作:自己先按照官网的说

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

1.安装Vue  注:node版本必须大于等于8.9  vue-cli3.x:npm install -g @vue/cli  vue-cli2.x:npm install -g @vue/cli-init 2.创建项目  vue init webpack my-project  注:安装依赖的时候,选择最后一个,就是自己安装,检验和路由初学者一般不安装,后面学习的时候再安装到项目  cd my-project  npm start/npm run dev 3.工程目录说明 . ├── buil

Vue学习手记02-路由创建

1.创建项目  注意:项目在初始化的时候不要安装vue-router 2.安装路由:  cnpm install vue-router --save 3.如果在一个模块化工程中使用它,在main.js中必须要通过 Vue.use() 明确地安装路由功能:  import Vue from 'vue'  import VueRouter from 'vue-router'  Vue.use(VueRouter) 4.main.js创建路由  const router = new VueRouter

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

分两种情况---无路由和有路由 无路由 看到启动页面 在文件main.js( vue项目的入口文件)中 这里可以看到,生成了一个全局的vue实例,绑定在了#app上面,也就是在文件index.html中的那个div. 然后这个vue实例,使用的是 ./App这个组件,然后模板是:'<App/>',这就是说明是用App组件进行渲染的. 再看index.html文件 然后接着看App.vue App.vue 这个组件中,模板中就是一个img,下面是一个的组件,在'./components/Hell

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

01.安装 安装mock npm install mockjs 安装axios npm install axios 02.新建一个config.js文件做axios拦截 import axios from 'axios' // 创建一个实例 const service = axios.create({ //设置请求延迟时间 timeout: 3000 }) //请求的拦截 service.interceptors.request.use( config => { return config },

vue 路由跳转,路由传参的几种方式

1. router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link> 2. $router方式跳转 this.$router.push({ path: 'yourPath', query: { name: 'name', dataO

vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )

一.路由的配置 路由  vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面开发模式. 2. 路由在web 有两种: 第一种 hash hash值前面带 # "  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string  #hash " 第二种是 h