电商项目实战前篇07 - vue-router的使用(路由)

组件之间如何切换？这个问题想过没有？因为是SPA单页面文件，所以对于组件的来回切换时之前占了一个坑的（router-view），这个坑一定是组件来填满，那么组件如何切换呢，今天咱们来学习vue-router。

他的基本步骤是这样的：

1 引入vue-router 2 创建router实例，规划路由 3 创建不同组件 4 使用router-view渲染不同组件

那么直接来写代码吧：

1 首先是vue三部曲，创建一个html文件，然后引入vue，创建div，创建vue实例

2 安装vue-router

命令行 npm i vue-router -S 安装之后就可以用了

3 引入vue-routerjs

<script src="./node_modules/vue-router/dist/vue-router.js"></script>

4 实现了一个基本的布局，头部和左右部分

写完css之后的效果图：

然后规划一下路由

其中左边为菜单项，可以规划为router-link（其实相当于一个a标签），但是它神奇就是神奇在通过他可以影响主界面的router-view

• <router-view>是一个占位符，用对应的组件来替换
• <router-link>指定跳转的URL地址

挂载router对象到vue实例中

const router = new vuerouter{}

在router对象中主要包含route路由规则,

一条路由规则一般由3部分组成

• path: URL地址
• name: 别名(可以不写)
• component: 对应的组件, 一个对象(组件参数)

routes是路由规则, 是一个数组

每个元素都是一条具体的路由规则(route), 使得路由和组件绑定.

因此在vue内部使用this.$route表示路由规则

使用this.$route.params获取路由规则中的参数

当URL匹配到路由规则时, 使用对应的组件替换<router-view>中的内容

现在理一下，其实就是在引入vue-router之后，创建router对象，在对象里面设定url和组件路径，然后挂载，只要是挂载之后，通过router-link就可以跳到相关的组件了。

创造两个组件，然后也挂载在vue上面，这样就可以根据路由去跳组件了

切记：如果组件是其他文件的，按照文件引用就可以了

那么vue-router就写到这里了，下期咱们来聊聊vue中的v-for和v-if，我是黑胖哥，如果对您有帮助，请关注点赞评论转发，谢谢！