npm vue路由配置

npm vue路由

复习：1、README.md文件：保存如何使用的命令

 

 

 

（1）     npm install:拷项目时可以不拷node_modules文件，运行该命令时，会自动下载node_modules(文件很大)

（2）     npm run serve:运行环境服务

（3）     npm run build：编译

2、main.js:路由配置文件

3、App.vue:所有页面通过id=“app”这个div渲染出来，如何运行？在集成终端打开，npm run serve 运行，点开运行成功的网址，就是APP.Vue渲染的内容了。

配置路由

一、新建一个文件（页面后缀都是vue）：

 

 

 

二、访问页面：

要想访问这个页面，需要借助APP.vue，这时就需要路由将它们连接起来。

官网：Vue Router (vuejs.org)

1、安装路由：

 

 

 安装成功在package.json中可以看到：

2、引入：在main.js文件中添加配置

 

 

 

 3、使用/配置：

在src下新建一个router目录，里面新建一个routes.js文件

然后在routes文件中配置Test路由：

 

 App.vue文件中引入：

 

添加成功访问页面：

 

Vue router 的嵌套：

1、 新建一个页面：

2、 在routes.js配置嵌套路由：

在test.vue中引入：

 

 3、 通过嵌套路由访问test1页面：