标签。前面提到过：
App.vue 是单页面应用的主组件。对照着前面在浏览器中打开的应用主页面，
img 标签就是页面上方的
Vue 的
logo。那下面的内容去哪了呢？和
<router-view/> 有关系吗？这就要去看路由了。3、router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
],
});
前面先引入了路由插件
vue-router，然后显式声明要用路由
Vue.use(Router) 。路由的配置非常地明了：给不同
path 分配不同的组件（或者页面），参数
name 只是用来识别。当我访问根路由
http://localhost:8080/#/ 时，
App.vue 中的
<router-view/> 就会把引入的
HelloWorld 组件分配给我，放在了
img 标签的下面，打开
components 目录下的
HelloWorld.vue 就可以看到具体内容了。我们在看到浏览器中的
的时候会觉得奇怪，为什么在后面加了一个url号呢？这是因为#默认vue-router模式 —— 使用hash的URL来模拟一个完整的hash，当 URL 改变时，页面不会重新加载。详见：https://router.vuejs.org/zh/guide/essentials/history-mode.html。这里可先跳过这点内容。URL
现在，我们在浏览器访问
http://localhost:8080/#/vue 这个地址，会发现只出现了
Vue 的
logo。这是因为我们并没有配置
/vue 这个路由，找不到路由，那
<router-view/>
