zoukankan      html  css  js  c++  java
  • nuxt 嵌套路由跳转方式 (不同目录下跳转)

    今天研究了下nuxt 感觉路由跳转和vue的有点差别,但不是很大,总结了一点方法分享

    1、同目录路由跳转,从当前目录index.vue 跳到同目录下的home.vue 路由下

    这种方式很简单,直接 <nuxt-link to='/home'>home</nuxt-link> 就OK了

    2、嵌套路由跳转, 从当前目录 home.vue 跳到同目录下home文件夹中的title.vue 

    这种相对待开发中用的比较多,首先由在pages目录下有一个和home文件夹同名的home.vue,在第一步我们已经创建好了,这不是必须的(必须同名),

    然后在home.vue中加入:

    <nuxt-link to="/home/title">home/title</nuxt-link>
    <nuxt-child></nuxt-child>

    这样才可以切换到title.vue组件中

    3、嵌套路由跳转,从当前目录 index.vue 跳到同目录下home文件夹中的title.vue, 这种相对待开发中用的也比较多,在官方文档中没有给出明确的方式,但是官方给了一种

    动态添加路由的方法可以实现这一点:关键来了

    在index.vue中加入:

    <nuxt-link :to="{name:'home-title',params:{id:'title'}}">title</nuxt-link>

    关键点要把title.vue的名字改为_title.vue ,  其中id:“title” 的目的是为了使path为 /home/title ,可以把params中的id值写死,这样就是实现了嵌套路由跳转(不用在pages下建一个同名的vue文件了)

    如果要在_title.vue下跳转到同目录下的xxx.vue 下 ,直接 <nuxt-link to='/home/xxx'>xxx</nuxt-link> 就OK了

  • 相关阅读:
    动态载入DLL
    在DELPHI中使用自定义光标
    Delphi实现提取可执行文件内部所有图标
    delphi 网络函数
    delphi制作dll
    实现半透明效果
    自绘按钮,添加Color属性(转载)
    为汉语名字生成首字母助记码
    DELPHI 获取本月 的第一天 和 最后一天
    GRID用法(取行、列值;定位选中某行等等)
  • 原文地址:https://www.cnblogs.com/styleFeng/p/12505903.html
Copyright © 2011-2022 走看看