Nuxt.js的路由跳转操作(页面跳转nuxt-link)

路由跳转代码如下：

<ul>
 <li><nuxt-link :to="{name:'index.vue'}">HOME page</nuxt-link></li>
 <li><nuxt-link :to="{name:'new-new'}">NEWS page</nuxt-link></li>
 <li><nuxt-link :to="{name:'plays-play'}">PLAY page</nuxt-link></li>
</ul>

注意说明：

to 前面有冒号“ : ”

to 后面跟的是路径比如“/page/index”(可以跟字符串或对象)同上↑

补充知识：nuxt的 nuxt-link 有个坑

如果你跟着nuxt的案例走，记住 ，所以目录 比如 PAGES 目录 你最好小写 pages 所有目录都小写

因为 当你敲下面哪行代码 时

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

name其实指向的是路由，而路由死活区分大小写的 注意 to后面区分大小写！！！

所以如果你目录是 大写的 PAGES

以上代码要写成

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

以上这篇Nuxt.js的路由跳转操作(页面跳转nuxt-link)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • nuxt 页面路由配置,主页轮播组件开发操作

    在上一个章节内容中,我们开发了AppHeader公共顶部菜单导航栏组件,本章节呢,我们根据菜单导航的路由导航,来配置我们的 page页面, 去到pages目录,我们需要创建3个[nuxt_link_name].vue页面文件,用来匹配路由导航需要加载的页面: 好,我们进入命令行,来创建页面文件, 1.windows 系统下可以使用如下命令: for /r %v in ( index.vue , jokes.vue, about.vue ) do type null > %v 2.linux/ma

  • Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

    Nuxt嵌套路由官网上的API详解:点击链接 看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容,要想默认的在<nuxt-child>区域显示一个页面内容怎么办? 自己案例代码: pages/parent.vue <template> <div> <h2>父组件的页面的内容</h2> <ul> <!-- 进行切换子页面,写法同vue.js --> <li><nuxt-link t

  • nuxt.js 在middleware(中间件)中实现路由鉴权操作

    路由鉴权: 就是判断这个路由当前浏览者是否需要权限访问. 一般我是通过判断cookie中存储的token来判断的. 在middleware文件夹下新建"auth.js"的文件 在当前auth.js文件内判断cookie中是否包含token字段 import getCookie from '~/utils/getCookie' export default function ({route, req, res, redirect}) { let isClient = process.cl

  • Nuxt.js的路由跳转操作(页面跳转nuxt-link)

    路由跳转代码如下: <ul> <li><nuxt-link :to="{name:'index.vue'}">HOME page</nuxt-link></li> <li><nuxt-link :to="{name:'new-new'}">NEWS page</nuxt-link></li> <li><nuxt-link :to="

  • nuxt.js写项目时增加错误提示页面操作

    为项目增加错误提示页面,比如后端接口没有数据或接口报错的时候,如果不增加错误提示页面的话,那接口报错的信息就会在页面中显示,这显然不利于用户体验. 实际操作过程中,可能因为各种原因无法显示正确的返回页面,比如本身这篇文章的id不存在,或者网络请求问题,这时候就需要一个错误展示页用来提示用户: nuxt.js官方也有错误提示页面的写法:传送门-> 官方错误提示页面的写法 此项目中的错误提示页面是放在layouts目录中: layouts中的error.vue页面内容为: <template>

  • Nuxt.js实战和配置详解

    前段时间刚好公司有项目使用了Nuxt.js来搭建,而刚好在公司内部做了个分享,稍微再整理一下发出来.本文比较适合初用Nuxt.js的同学,主要讲下搭建过程中做的一些配置.建议初次使用Nuxt.js的同学先过一遍官方文档,再回头看下我这篇文章. 一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比  1. build后目标产物不同 vue: dist nuxt: .nuxt 2. 网页渲染流

  • Nuxt.js开启SSR渲染的教程详解

    第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html. 1.那服务器端渲染到底有什么好处呢? 主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没必要使用这个框

  • 在nuxt中使用路由重定向的实例

    我们都知道,在写SPA的时候,我们可以通过配置vue-router来实现路由的重定向. 官方文档(以及ts类型)的定义中给出了这一选项: interface RouteConfig = { path: string, redirect?: string | Location | Function, } 也就是说,我们可以定义这样一个路由: { path: "/foo", redirect: "/foo/bar", } 这样,我们在访问/foo的时候,就会被重定向到/

  • Nuxt.js实战详解

    Nuxt.js实战详解

    一.为什么选择Nuxt.js 多数是基于webpack构建的项目,编译出来的html文件,资源文件都被打包到js中,以下图404页面代码为例.从代码中可以看出,这样的页面是不利于 搜索引擎优化(SEO, Search Engine Optimization) ,并且 内容到达时间(time-to-content) (或称之为首屏渲染时长)也有很大的优化空间.为了解决以上问题,引入了 Nuxt.js 框架. vue官网对于Nuxt.js也是很推荐的,除此之外,Nuxt.js的开发者积极活跃,版本迭

  • Nuxt.js nuxt-link与router-link的区别说明

    前言 在使用Nuxt.js时可能会遇到一个这样的问题? 当打开请求页面的时候,所有页面都被请求了. 这正是<router-link>组件所有的特性. 首先说一下router-link router-link <router-link>是使vue项目具有路由功能的应用点击组件. nuxt-link 先看一下官方api介绍<nuxt-link> 正如官方所说<nuxt-link>使用方式和用途<router-link>是一致的. 但,后面说将来我们会

  • 详解Vue基于 Nuxt.js 实现服务端渲染（SSR）

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是Nuxt.js 一.快速模板 在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板 vue init nuxt-commun

  • nuxt框架中路由鉴权之Koa和Session的用法

    引子 博客的后台管理页面需要有登录系统,所以考虑做一下路由鉴权,实现方式也是 Nuxt 官网给出栗子来改写,顺便也将前后端路由给统一了. 路由拦截 前端方面主要通过利用 Nuxt 的中间件来做路由拦截,这里也是需要 Vuex 状态树来做. middleware middleware/auth.js export default function ({ store, redirect }) { if (!store.state.user) { return redirect('/login') }

  • javascript 判断用户有没有操作页面

    javascript 判断用户有没有操作页面 用js判断用户有没有操作页面,我们所要做的就是整理我们的思路. 一.思路 用户有没有操作界面,我们可以从页面在规定时间内有没有触发事件去考虑.比如用户有没有点击,有没有按键,有没有滚动鼠标滚轴.用户有没有移动鼠标等等.如果用户没有进行这些操作,那么我们可以大概的认为用户没有操作页面.我们可以给一个定时器.来记录在规定时间内用户有没有触发这些事件.我直接贴代码,代码的具体含义,我就不再讲解,思路大概就是这样. 二.代码演示 <!DOCTYPE html

随机推荐