Vue-Router 源码分析使用方法总结

Posted 2020-11-27 greatdesert

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue-Router 源码分析使用方法总结相关的知识，希望对你有一定的参考价值。

Vue-Router是Vue的官方路由器，它和Vue的核心深度集成，让构建单页面应用变得亦如反掌。

阅读VueRouter的源码需要深刻理解Vue才能完全理解,因为它里面很多概念用到了Vue，相比较vuex、axios，我认为Vue-Router的源码比较晦涩，难以理解，原因如下:

Router-view是一个函数式组件，它的渲染需要理解父子组件的一个链的一个知识
Router-Link组件自定了render函数

为了更好理解Vue-Router,我计划分8篇文章来讲，计划这个月底前写完(4月份开始写React的知识了)

VueRouter的使用方法
VueRouter的设计思想及代码结构
VueRouter实例的属性和方法
$router与$route的区别
router-link组件的用法及原理
router-view组件的用法及原理
VueRouter.push()的详解
导航守卫的用法和原理

writer by:大沙漠 QQ:22969969

VueRouter使用前需要npm install安装一下:

npm install vue-router

然后先用Vue.use(Router)安装一下VueRouter这个插件，再创建一个VueRouter示例，一般单独创建一个router目录，用于存储router的对象,如下:

import Vue from ‘vue‘ 
import Router from ‘vue-router‘
import Home from ‘../components/Home‘
import Login from ‘../components/Login‘
Vue.use(Router)                             //安装VueRouter

export default new Router({                 //导航VueRouter的实例
  mode:‘history‘,
  routes: [
      {
      path: ‘/login‘,
      name: ‘login‘,
      component: Login
    },
    {
      path: ‘/‘,
      name: ‘home‘,
      component: Home
    }
  ]
})

最后在创建根Vue实例的时候通过router属性传入这个对象就可以了

为了实例方便，我们用script标签引入一下vue、vuerouter，如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueRouter Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script>
</head>
<body>

</body>
</html>

这样就可以在body内写测试例子了，如果是通过script标签引用vue、vuerouter的话，VueRouter插件会自动安装的，不需要调用Vue.use(Router)来安装了

OK，环境搭建好了，现在来个例子(后面的例子都把代码放入上面的<body></body>标签内即可)，如下:

<div id="app">                
    <h1>Hello App!</h1>
    <router-link to="/login"><a>登陆</a></router-link>
    <router-link to="/hello"><a>Hello页</a></router-link>
    <router-link to="/info/13">详情页1</router-link>
    <router-link to="/info/12">详情页2</router-link>        
    <hr/>
    <router-view></router-view>
</div>
<script>
    const login = { template:‘<div>Login Page!</div>‘}                        //定义三个组件
    const hello = { template:‘<div>Hello World!</div>‘ }
    const info  = { template:‘<div>id:{{this.$route.params.id}}</div>‘}
    const routes = [                                                         //定义路由指向
        {path:‘/login‘,component:login},
        {path:‘/hello‘,name:‘user‘,component:hello},
        {path:‘/info/:id‘,component:info},
    ]

    var router = new VueRouter({                                             //创建一个VueRouter实例
        routes
    })

    const app = new Vue({                                                     
        el:‘#app‘,
        router:router                                                         //创建Vue实例时传入router即可
    })
</script>