1.先开始定义路由,在src/router/index.js,添加路由规则
![](https://box.kancloud.cn/81514a699b94e20e3cc3e6bf30c970b5_875x460.png)
2.在页面上使用`<router-view></router-view>`标签,它用于渲染匹配的组件。
我这里渲染的是App.vue页面
![](https://box.kancloud.cn/12b3a4ceed9924a7576cee76ea290d23_845x575.png)
3.接下来我们就可以用路由进行访问了
![](https://box.kancloud.cn/ec6f00b0f2fdeea78a56199bcbf5c74f_1058x307.png)
4.使用<router-link>进行页面跳转,我这里定义了两个路由,一个 home 一个 about
![](https://box.kancloud.cn/d5db20833c1caa21f24f9ecb2f57a49a_658x517.png)
![](https://box.kancloud.cn/b312f8171e788537d6cde507abf990ae_941x319.png)
下面是效果图
![](https://box.kancloud.cn/6277d726fd33fdd426a722803967db26_1353x611.gif)
这样。我们的路由就跳转成功了。