首页 > 其他 > 详细

router路由的使用

时间:2020-03-23 10:25:46      阅读:47      评论:0      收藏:0      [点我收藏+]

router路由的使用

 

1.使用nuxt-link来跳转路由

 

<!-- 要跳转的路由的地址就是pages文件夹中定义的xxx.vue的前缀名-->

<nuxt-link to="/home">Home page</nuxt-link>

<!-- 默认在pages文件夹下的index.vue就是默认的 / 的文件 -->

 

 

技术分享图片

 

技术分享图片

 

 

 2.定义动态路由

// 动态路由创建文件的时候需要以_为前缀命名文件比如_id.vue。那么路由访问的时候就是/2323或者/hdg就可以访问


// 也可以创建文件夹如_id,那么他下面的index.vue就是默认首页,下面的其他xxx.vue文件想要动态,任然是_xxx.vue


// 路由的嵌套,在当前路由下配置子路由。比如当前文件是home.vue那么跟他同级别就需要创建文件夹home,
// 那么home目录下的xxx.vue就都是home.vue的子路由。简单来说也就是vue的文件名和其他的文件夹名相同,
// 那么其他的文件夹名就是当前vue文件路由的子路由



// 注意:再使用路由的时候记住需要设置路由的容器nuxt-child也就是出口



// 验证路由的参数类型,使用validate来判断路由的参数类型,如果匹配就让他进入当前页面,否则就是404页面

validate ({ params }) {

    // 参数需要数字类型
    return /^\d+$/.test(params.id)
}

 

技术分享图片

 

 

技术分享图片

 

 技术分享图片

 

 

技术分享图片

 

router路由的使用

原文:https://www.cnblogs.com/zxuedong/p/12550129.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!