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安装一下:

writer by:大沙漠 QQ:22969969

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">登陆</router-link>
    <router-link to="/hello">Hello页</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>

这里我们创建了一个Vue和一个VueRouter实例，并把VueRouter的实例作为router属性传递给Vue,页面渲染如下:

组件写得比较简单，我们通过new VueRouter创建VueRouter实例时可以传入一个对象，该对象可以传递如下键:

routes ;路由的记录，是个数组，每个元素是一对象
mode ;路由的模式 ;可以设置为:hash(默认的模式)、history、abstract(非浏览器模式下)
base ;应用的基地址 ;如果整个单页应用服务在/app/下，那么base应该设为"/app/"
linkActiveClass ;全局配置 <router-link> 默认的激活的 class
linkExactActiveClass ;全局配置 <router-link> 默认的的精确激活的 class
scrollBehavior ;和滚动行为有关
parseQuery/stringifyQuery ;提供自定义查询字符串的解析/反解析函数。覆盖默认行为
fallback ;当浏览器不支持history.pushState控制路由时是否应该回退到hash模式，默认为true

比较常用的就是router了，是个对象，可以传入如下键:

path ;该路由的路劲
name ;该路由的name
redirect ;重定向相关
meta ;路由元信息，可以存储该路由的一些属性，很有用的
components ;对应的组件，值是一个对象格式，和命名视图相关
component ;默认组件，是个字符串格式
alias ;别名
children ;路由嵌套相关
beforeEnter ;导航守卫相关

VueRouter提供了两个组件:

router-link 支持用户在具有路由功能的应用中 (点击) 导航， ;就是渲染出一个元素(默认为a),触发该元素上的事件会产生路由跳转
router-view 渲染路径匹配到的视图组件　　　　　　　　　　;根据当前环境寻找到合适的组件并渲染出来

具体到每个点的介绍，后面再介绍，本篇先开个头，下一篇文章讲解VueRouter的设计思想及代码结构

posted @ 2020-03-03 12:19 大沙漠阅读(762) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

大沙漠

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

公告