Vue-router 01安装配置即常识

在上一篇文章中，在vscode中配置安装vue-cli 已经安装了vue router

如果在vscode中未安装router 可以在终端输入 npm install vue-router --dev-save

下图是router文件夹下的index.js中的文件配置 其中第四行引入了Hi组件，在export default中照葫芦画瓢创建一个新对象

写入路径名称等   （其中在最上面引入 Hi文件时 可以把光标放在第三行 按住 shift+Alt+↓ 会把当前行内容复制到下一行）

其中routes这个数组它的作用：定义hash地址与组件的对应关系

组件中path本是哈希地址 但是在index.js文件中hash地址不能写#

如果不用router-link而使用a链接的话得写全哈希地址必须加上#

在router/index.js中引入的组件都会加载到App.vue这个文件中的router-view这个标签内

<router-view>: 它的作用是占位符，并且为路由的组件展示提供条件 （该标签使用的前提必须是安装vue-router）

打开http://localhost:8080   网址后会出现这样的效果

但是在网址栏中，红圈部分加入Hi进可以进入导入的Hi组件中 

这样就实现了路由的跳转，但是这样很麻烦，要不停的在网址栏中输入文件名来实现文件的跳转，

在App.vue中，可以使用<router-link to="/">首页</router-link>直接跳转到指定组件中，

这样就不需要手动在网址中输入组件名进行跳转       

router-link标签相当于a标签一样，router-link中的to 相当与a标签里面href（跳转的网址）

注意router-link中to的值与路由中的path值对应

实现的效果是