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页面:

 

posted @ 2021-09-14 17:45  小小小侠  阅读(221)  评论(2编辑  收藏  举报