接上节。
答案就是在router.js中：
注意看，之所以我们打开网址，默认只有/也就是空路由的情况下，打开的是Home默认页面，就在三个红线箭头上。
我们现在改成这样，就可以实现我们要的效果了：
这里的name其实没什么用，就删了。然后改了compontent的值，为上面我们新引入的刚刚写的页面级组件 ToolList.vue 并取名为 ToolList 。
然后ctrl + s 保存，看看浏览器的效果：
成功展现了我们自己手写的ToolList.vue 的内容。
这里有同学要问了，上面的那个 超链接是哪来的？
答案是在这里：App.vue
在这个App.vue中可以看到这俩个超链接，所以我们猜测出来一个事实，就是首页展示的其实是这个App.vue的内容，然后App.vue内引入了 router.js里的目标组件，靠的就是那个 <router-view>
简单概况就是， App.vue是母体。
如果我们不想要这个超链接demo。就干脆注释掉即可。
友情提示，选中要注释掉的所有行，按command + ? 即可反复注释/生效
然后ctrl+s保存，看看浏览器(浏览器不需要刷新，它监控到组件变化，会自动刷新。)
可以发现，顶部的超链接已经不见了。
然后我们这个页面只是在前端本地调试上展现成功了。大家注意到，我们的浏览器url的端口是：8080
显然这并不是django项目的8000端口。
那如果说前后端要合并起来，并在django中启动打开页面的话，要怎么做呢？
通俗来说就是要把前端的东西打包一下。
还是在终端v_project根目录下中执行命令：npm run build 。
友情提示，可以先ctrl+c 多按几次来杀掉npm run serve这个启动前端的服务，然后就可以正常执行 npm run build打包命令了。
打包过程较慢，可能几十秒，大家耐心等待。
打包成功后：
此时我们去看看dist文件夹：
实际上，这时候我们写的东西都已经翻译并融入到了 dist/index.html中了。
django是可以直接调用返回这个index.html的。所以我们启动django服务：
启动命令是 python3 manage.py runserver 0.0.0.0:8000
或者你直接按pycharm右上角的启动按钮：
启动成功后控制台输出如下：
注意看，此时给的url的端口是 8000 ，前端之前是8080，这里大家注意区分。
打开这个8000的网址：发现如图所示：
这个问题是因为我们的空路由 并没有被指定关联。所以报404。
那么我们这里怎么改一下呢？当然是和前端保持一致。
前端空路由 对应首页。
我们django后台也要在urls.py中用空路由 对应 这个index.html 才行，不然后续可能会引发bug。
注意这里我们之前用/home/来对应index.html了，现在改一下：单用一个空字符串来代表index.html。
保存后，刷新浏览器，注意最好刷新一下，django后台需要手动刷新，不比vue-cli前端方便。
结果如下：
看到127.0.0.1:8000 直接对应并且展示了我们的首页，就算成功~
本节到此结束，欢迎大家追更下一节哦~
