关于路由的问题，请老师解答
来源：1-4 Vue项目预热 - 单文件组件与Vue中的路由（1）
张月白
2020-11-24 09:39:22
# 具体遇到的问题
关于路由目的不就是引用helloword的组件，我为什么不直接引用组件，或者干脆写在App.vue里，反而多此一举呢？路由到底起个什么作用？
这个path完全听不明白，根目录是那个？path起到什么作用呢？
export default这行命令是什么意思？
Vue.use(Router)这行代码是什么意思？
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},{
path:'/list',
name:'List',
component:List
}
]
})
1回答
-
同学你好，问题解答如下：
1.如果直接引入，页面默认就会显示这个组件的内容了。但是有一些组件默认是不想要显示的，而是点击某一个链接才会显示，此时就可以使用路由。等同学学习到后面的案例就好理解了，例如按钮中默认显示首页，首页导航处有一个城市选择。
当点击城市按钮时，路由就会加载对应的城市列表组件，如下：
所以路由的功能就类似于导航，例如慕课网这个导航，如果在传统的开发中，每一个页面一个html，那么这个导航就可以使用a标签包裹，使用a的href属性设置要跳转到的html页面。而vue中，是单页面应用，只有一个html页面，所有的组件在这个页面中进行切换，此时要制作导航，就可以使用路由。点击哪一个链接，路由对应的组件就会显示到这个页面中。
2.path是设置路径的，斜杠/表示根路径。当访问项目时，默认打开的就是根路径。等后面做城市列表的时候，也会有一个城市列表的路径。
这个对应的是router-link中的路径，即如下to属性中的路径。点击城市按钮时，这个路径就会匹配上面path中的路径，匹配到了，页面就会加载component中对应的City组件：
城市组件中有一个返回按钮，如下：
点击它就会返回到根路径，所以这个按钮的router-link中，匹配的就是斜杠。如下：
老师上面讲解的所有内容，先提前了解一下。当前，先把基础语法固定记住，等同学学习完vue的整个案例，基础结合了应用就能懂了。
3.export default是es6中导出模块的语法，如果想要在其他地方使用，就要导出。别的文件在使用时，就要通过import...from...导入。如下图所示，在main.js中导入：
导入之后，在main.js中就可以使用这个模块了。
4.Vue.use()是用来注册插件的，Vue.use(Router)意思是把前面通过“import Router from 'vue-router'”导入的Router注册一下。这个固定记一下哦。
祝学习愉快~
2
相似问题