Vue-路由router实现原理

html 渲染

<div id="app">
<!--定义导航-->
<router-link to="/">组件一</router-link>
<router-link to="/testB">组件二</router-link>
<!--显示组件内容-->
<router-view></router-view>
<!--或者-->
<!--<router-view/>-->
</div>

javaScript - 四步骤

<!--引入vue&vue-router-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 四步骤：
//1、定义组件
var testA = {
    template:"<div>我是组件一！</div>"
}
var testB = {
    template:"<div>我是组件二~</div>"
}
//2、定义路由
//          var routes = [//写成这样的话，实例化路由routes:routes1改为=>routes
var routes1 = [
    {path:"/",component:testA},//路径和注册  //---只有一个/表示默认路由，同时router-link 也要改成只有一个/
    {path:"/testB",component:testB},
]
//3、实例化路由
var router = new VueRouter({
//              routes//注意routes这个属性名字不能改
    routes:routes1
})
//4、把实例化的路由对象注入到vue实例中。
var vm = new Vue({
    el:"#app",
    router
})
</script>

最后的实现功能效果：

image.png

将原理在vue脚手架中运用：

• 第一步：定义组件 --- 放在views 中；
• 第二步：定义路由 --- 在router.js文件中设置 路径等；
• 第三步：实例化路由 --- 直接在router.js文件中引入、使用、导出实例化插件；
• 第四步：把实例化的路由对象注入到vue实例中 --- 在main.js文件中注入。

文件较多，比较复杂