一、路由
在Vue中 需要手动配置router路由规则 而Nuxt省去了手动挨个配置的麻烦
Nuxt会自动检测并配置路由 因此 只需要直接在浏览器访问即可
但Nuxt自动生成的路由规则有着一定的规律
普通路由
若组件是在文件夹里 则前面需要带上文件夹的名称
若URL不带组件名 则默认路由到的是文件夹中的index.vue
例如 目录结构如下：
pages
--| user
-----| index.vue
-----| one.vue
--| index.vue
--| two.vue
此时 若要访问pages下的index.vue 只要访问/即可
若要访问pages下的two.vue 只要访问/two 不用带.vue的后缀名
同理 若要访问user下的index.vue 只要前面带上包名：/user 因为默认访问的就是index.vue
若要访问user下的one.vue 只需要访问/user/one即可
在Nuxt中 使用<nuxt-link>标签进行路由的跳转 替代了Vue的<router-link>标签
和<router-link>一样 也是使用to属性 传入目标路径：
<nuxt-link to="/">Home</nuxt-link>
当然 也可传入一个对象 name属性填入字符串格式的目标路由的值
此时 to属性必须用v-bind绑定 否则Vue会识别成字符串
<nuxt-link :to="{name:'index'}">Home</nuxt-link>
<!-- 这和上面的<nuxt-link to="/">Home</nuxt-link>的效果是一样的 -->
用params属性传递参数 传入的也是一个对象的格式：
<nuxt-link :to="{name:'news',params:{newsId:1279}}">News</nuxt-link>
在目标页面中接收的方式和Vue一样：
<template>
<div>
<p>{{$route.params.newsId}}</p>
</div>
</template>
动态路由
动态路由组件的命名 必须是以下划线[_]为前缀 然后以参数名来作为组件名称
比如 目录是这样的：
pages
--| news
-----| index.vue
-----| _id.vue <!-- 请注意 这个id前面带有下划线 说明是动态路由 -->
--| index.vue
news/index.vue :
<template>
<div>
<nuxt-link to="/news/12">news1</nuxt-link>
<nuxt-link to="/news/34">news2</nuxt-link>
</div>
</template>
当然 动态路由也可传入一个对象：
在name里 不仅要提供目标路径 而且后面还要带上参数名 中间用短横线进行连接
在params里 参数名要和name里的参数名对应
<template>
<div>
<nuxt-link :to="{name:'news-id',params:{id:12}}">news1</nuxt-link>
<nuxt-link :to="{name:'news-id',params:{id:34}}">news2</nuxt-link>
</div>
</template>
在动态路由组件里 还是用$route.params来获取参数
_id.vue：
<template>
<div>
<p>NewsId:{{$route.params.id}}</p>
</div>
</template>
参数校验
用validate()方法进行校验 传入一个对象 用正则表达式进行校验 最终结果返回布尔值
若对正则表达式不太熟悉 请参看我的Regex正则表达式的语法介绍(带例子)
<script>
export default {
validate({params})
{
return /^\d+$/.test(params.id);
}
}
</script>
若validate()方法返回的是true 代表参数校验成功 会正常进入页面
若validate()方法返回的是false 代表参数校验不成功 则会进入Nuxt默认提供的404页面
当发生异常错误 同样会进入Nuxt提供的500页面：
<script>
export default {
validate({params})
{
throw new Error("发生了一个未知错误哦")
}
}
</script>
二、路由动画
在Nuxt中 可以给全局添加动画效果 也可给单独的组件添加动画效果
若不是用<nuxt-link>标签进行路由跳转(例如用的是<a>标签进行跳转) 则无动画效果
全局路由动画
在全局CSS文件里进行配置：
(关于全局CSS文件的配置方法 请参看Nuxt的目录结构和常用配置)：
在类名前面要带上page 从而表示是应用于全部页面的过渡动画效果
.page-enter-active,
.page-leave-active
{
transition: opacity 1s;
}
.page-enter,
.page-leave
{
opacity: 0;
}
若对动画类不太熟悉 可参看Vue学习之旅Part8：Vue全局组件和私有组件的创建及组件切换动画
单独路由动画
只给某个或某些组件单独设置路由动画
同样的 也是在全局CSS文件里进行配置：
不过 在类名前面加的是自定义的标签名 而不是page
名称可随意取 我在下面的例子中 使用的是mystyle
.mystyle-enter-active,
.mystyle-leave-active
{
transition: all 1s;
font-size: 20px;
}
.mystyle-enter,
.mystyle-leave
{
font-size: 40px;
}
然后 在要设置动画的组件里 在<script>标签里进行配置：
设置transition属性 其值就是自己定义的标签名
<script>
export default {
transition:"mystyle"
}
</script>
