开篇
上一篇说vue.js的配置相关的东西，纯粹是给自己留个备忘录而已，懒得去再问百度，翻翻自己写的东西就好，所以才这么开篇的。现在，这一篇开始就是真正主菜——路由。
来点废话
什么是路由？
这个问题不用我回答了吧，聪明如阁下肯定第一时间百度出来了：）。那么我就不多费口舌去解释一番了。直接跳过此问题~
可以说用vue.js的小伙伴，98%都是冲着构建SPA应用（Single Page Application）取得，那末，就100%得用到路由。所以，我认为框架好不好用，首先要看路由好不好上手。
说vue-router之前，首先献上一个传送门：
vue-router中文说明
如果把上面的连接吃透了的小伙伴，接下来就不用继续往下读我的废话了！（真粉除外）
首先，定义容器标签
HTML代码里面必须得有一个<router-view>标签作为当前路由页面展现的容器，例如：
<div id="app">
<router-view></router-view>
</div>
然后，vue绑定路由
三部曲：
1.把路由页面组件（Component）设计好
2.定义路由配置，并将组件绑定上去
3.初始化vue-router & vue
JS代码示例
//定义路由
const routes = [
{path:'/',component:Home},
{path:'/create',component:UserAdd},
{path:'/edit/:id',component:UserEdit}
]
//创建路由实例
const router = new VueRouter({routes})
//注册vue
const app = new Vue({
el: '#app',
router ,
...
})
再然后，链接跳转
静态链接可以用<router-link>标签，例如：
<router-link to="create">Add User</router-link>
另外，如果用JS触发跳转用router.push，例如：
this.$router.push("/edit/12")
当然，其中还有其他的方法或者不同的变量参数得到不同的跳转效果。这里点到即止，详见看官方文档说明。反正呢，在我自己的基础实践基本上就是这些套路。
当然当然，，，接下来肯定还有“高级路由篇”，譬如，讲讲动态了路由（做后台MenuTree必备）。容我摸索得更加透彻一点再写吧~~
嗯，好像讲完了。再会~
网友评论