Nuxt.js路由篇

开门见山

本篇文章主要是介绍Nuxt.js路由，分别有普通路由、嵌套路由，路由导航，编程式路由，动态路由

基本路由

项目根目录下有一个pages文件夹，这个文件夹就是关于路由的
新建 index.vue  /  about.vue  / home.vue
index.vue是默认路由界面
project path/about 切换到about界面
project path/home/切换到 home界面 

嵌套导航

路由导航总共3中

a标签
<a href="/">
不建议使用 造成页面刷新

nuxt-link
<nuxt link ="/"> 填写路由地址即可

编程式导航
<button @click="changeRouter"> </button>

methods:{
	changeRouter(){
			this.$router.push("/")//跳转到跟路由
	}
}

动态路由

其实跟vue-router动态路由差不多的，只不过不用写路由规则，只需要注意命名规则即可，如下所示

在nuxt.js里面可以创建带参数的动态路由，需要创建对应的以下划线为前缀的Vue文件或者目录即可

user => _id.vue  浏览器访问user/2就可以打开网址

通过$roure.params.id拿到动态路由参数

嵌套路由

内嵌子路由，需要添加一个Vue文件，同时添加一个与改文件同名的目录用于存放子视图组件
别忘了在父组件内增加<nuxt-child/>用于显示子视图内容

users.vue => 父路由写入 <nuxt-child/>

users 文件夹
里面包含 index.vue / about.vue
这样就创建了嵌套路由其实和vue-router差不多，只不过不用手写路由配置了

自定义路由配置文件

在项目的跟目录下 新建nuxt.config.js文件，此处的配置文件遵循的commonjs规范
所以用commonjs导出对象

module.exports ={ 
	router : { 
		base:"/abc"
	} 
} 
//这样的话，路由需要abs开头才可以正常显示
//通常配置文件修改以后，需要重启项目，

谢谢观看，如有不足，敬请指教