我所知道的 vue-router

我所知道的 vue-router

vue-router 知识点

查看原图

vue-router : 简称路由,简单说就是根据不同的 url 地址,显示不同的效果

<router-link>: 组件用于帮助用户进行 导航 ,也就是我们传统的 a 标签经常做的事;a 的标签用 href 属性来指定导航的目标地址,而 <router-link> 组件则用 to 属性来定目标地址;

<router-view> : 是路由的出口,路由匹配到的组件将 渲染 在这里,即渲染 <router-link>指向的目标地址。

同一个路径可以匹配多个路由,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。

创建简单的 vue-router

创建路由

首先我们需要把 vue-router添加到页面,可直接用 script 引入页面

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

也可以使用模块化机制编程,导入 VueVue-router,要调用 Vue.use(VueRouter) ;


<router-link><router-view> 不必成双对的出现,可根据配置的不同路由渲染到一个 <router-view>

<div id='router'>
  <router-link to='/home'>Go to Home</router-link>
  <router-link to='/new'>Go to New</router-link>
  <router-view></router-view>
</div>
//JavaScript 代码
//1.创建组件
 const Home={
    template:`<span>我是主页</span>`
  };
  const News={
    template:`<span>我是新闻</span>`
  };
//2.配置路由
  const routersname=[
    {
    path:'/home',component:Home
  },
    {
        path:'/new',component:News
  },
    //重定向
    {
      path:'*',redirect:'/home'
    }];
//3.生成路由实例
 const router=new VueRouter({
  routes:routersname
  //此时 routers 和 routername 并不相等,所以不能在采用 es6 里面对象的简写方法
  });
  new Vue({
      el:'#router',
      router
  })

注意:在创建路由实例的时候应该知道其中使用了 ES6 对象里面简洁的语法;即在 ES6 中只写属性名不写属性值时,属性值就代表属性名所代表的变量

const router = new VueRouter({
  routes  // (缩写)相当于 routes: routes 是 ES6 对象里面简洁的语法
})

当然我们也可以不采用简写,自己随便配置,还是刚刚那个例子

//2.配置路由
const routersname=[
  { path:'/home',component:Home },
  { path:'/new',component:News },
    //重定向
  { path:'/new',component:News },
];
//3.生成路由实例
const router=new VueRouter({
  routes:routersname
//此时 routers 和 routername 并不相等
//所以不能在采用 es6 里面对象的简写方法
});

所以 router 后面的属性值应该始终和配置路由时候的变量一样

查看源码

嵌套的 vue-router

实际生活中的我们经常会遇到 多层嵌套的组件组合而成,URL 中各段动态路径也按某种结构对应嵌套的各层组件

这时候我们怎么办呐?

其实嵌套路由很简单,只需要加上一个 children 就好,children 里面的写法和外面的一样

嵌套路由

$route.params: 表示当前的参数即冒号后面的东西

/detail/:id/age/:age --->$route.params 表示 idage 组成的对象

查看源码

路由的两种实例方法

  • router.push({path:'/home'}): 直接添加一个路由,表现为切换路由,往历史记录里面添加一个历史记录
  • router.replace({path:'news'}): 替换路由,历史记录里面没有添加记录
router.push() 和 router.replace()

引入了过渡动画 ,顺便可以温习一下 transform 组件的知识,页面效果看起来好看多了,哈哈哈哈

查看源码

配置路由的模式

设置路由的跳转方式,无论是哪种模式改变路由都不会重新加载页面,

mode 表示路由的配置模式:两种

  1. hash 模式(默认):使用 URLhash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。(在当前页面的 url 后面加上路径 )
  2. history 模式: 通过history 完成 URL 跳转。(当前目录底下的路径跳转)
//创建路由实例 const router = new VueRouter({
mode: 'history',//跳转页面
routes
})

history模式

默认情况

路由的滚动 scrollBehavior

不知道你们有没有遇到过这样的情况?

当切换到新路由时,我想要想要页面滚到顶部!!!

当切换到新路由时,保持原先的滚动位置!!!!

当切换到新路由时,我想随意定位!!!!

这时候该怎么办???

告诉你 vue-router 能做到,而且很很好,它让你可以自定义路由切换时页面如何滚动。

const router = new VueRouter({
  routes,
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
     return {x:0,y:0} //对于所有路由导航,简单地让页面滚动到顶部
  }
})

路由监听 watch

vuewatch 用来监听当一个数据属性值发送变化时,就可以调用的函数;属于异步操作;一般情况下,我们建议用 computed 或者 menthods 代替。对于大型的应用我们就建议使用 watch

关于 mothd, computed, watch 三者的具体区别,推荐看大漠老师写的在Vue中何时使用方法、计算属性或观察者

回到 vue-router ,当我们切换路由的时候,希望某些属性也跟着路由变化;例如 这时候我们就可以用 watch 来监听路由,当路由发生变化时,相对于的样式也跟着显示或隐藏;这只是一个很简单的例子

<router-link> 属性

to :相当于 a 的标签用 href 属性,来指定导航的目标地址; 导航的目标地址的几种写法

1.字符串表示

<router-link to='Home'>Home</router-link>

2.v-bind 绑定属性

<router-link :to='Home'>Home</router-link>

3.对象表示

<router-link :to="{path:'Home'}">Home</router-link>

4.命名的路由

<router-link :to="{name:'Home',params:{home:123}}">Home</router-link>

5.带查询参数,下面的结果为 /Home?plan=private

<router-link :to="{path: 'Home', query: { plan: 'private' }}">Home</router-link> 

注意:我们常用前两种方法

replace

<router-link to='Home' replace>Home</router-link> 

给它设置了 replace 属性, 会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。详情请看上面 router.replace router.push() 的区别

设置 tag 就会把 <router-link> 渲染成某种标签

<router-link to="/foo" tag="li">foo</router-link>
  <!-- 渲染结果 -->
<li class='router-link-exact-active router-link-active'> foo </li>

<router-view> 属性

name<router-view> 设置一个名字,当有过个视图的时候,能够在保证每个视图中精确准确的定位

<router-link to="/">/</router-link>
<router-link to="/other">other</router-link>

<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>

举个例子

说了这么多,vue 的基本语法已经学的差不多了,我的 vue 语法学习也差不多到此结束了,接下来就是多多练习,在实践中去总结和继续学习。路由是一个难点也是重点,在我接触的 node.js 中,也会遇到路由的跳转。狼叔解释到“vue-routerexpress路由用的是同一个模块”。那这样岂不是更加好啦,弄明白了这里的路由跳转,express那边也会了,反之也成立。

文末来推荐一些 vue 的学习资料,都是精挑细选的

  1. 官方文档系列 vuevue-routervuexvue-loader
  2. 大漠老师写的vue系列文章,很细很全,有深有浅。看了收获挺多的
  3. 视频学习推荐,从 vue 1.0 开讲,可以大致纵观 vue 的发展,建议看的时候挑着看
  4. vue 2.0 基础系列vue2.0进阶系列
  5. 最后就是我自己总结的 vueGitHub 哈哈哈哈哈

作为一个 vue 的初学者,如果文章中有不对之处,还请指正,如果你有好的学习资源或建议,欢迎在下面的评论中与我一起分享


-----------------------------------------------------------------------------------------------

再次阅读官网,发现官网真是个好东西,官网简介大方,因有尽有,很全,可以考虑到我们需要解决的任何问题。官网的每一个小点都很重要,不容我们忽视;我想说说被我忽视的那些细小知识点,在我的毕业设计项目中却又用到的知识点

1.this.$router$route 的区别

第一次在官网看到这两个东西,很迷惑这俩究竟是什么意思,长得如此相像却又不是同一个东西;询问了一个朋友,然后自己又折腾了一下终于明白他们是什么意思啦!

this.$rouer 是路由的实例

$route 是当前路由信息

查看源码

2. 重定向

重定向的几种写法:

直接表示:

{ path:'*',refirect:'/' }//其他的重定向到主页

命名的路由:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

一个方法,动态返回重定向目标:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})
路由懒加载

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

component: resolve => require(['路径'], resolve)

编辑于 2018-02-17

文章被以下专栏收录

    关注前端前沿技术,探寻业界深邃思想。https://qianduan.group 欢迎微信/微博搜索『前端外刊评论』,关注我们。欢迎给本专栏投稿,原作译作不限,要求:质量高!如果愿意尝试从事前端技术相关的书籍的编写或翻译工作,请私信外刊君。

    有关前端开发的干货分享、教程指引。 欢迎关注,欢迎投稿。