Vue-Router2 实现路由功能

WEB前端 waitig 499℃ 百度已收录 0评论

注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。
在前面文章 vue-cli基础上,开始介绍。安装vue-cli时已经将vue-router安装,若还没有安装,可通过npm

npm install vue-router

一、使用路由

在main.js中,需要明确安装路由功能:

import Vue from ‘vue’
import VueRouter from ‘vue-router’
import App from ‘./App.vue’
Vue.use(VueRouter)

1.引入定义好的组件

import Compos from ‘./components/compos/compos.vue’;
import Version from ‘./components/version/version.vue’;

项目结构如下图:

这里写图片描述

2.定义路由

routes: [
    {
      path: '/', // 默认打开version路由(重定向)
      redirect: '/version'
    },
    {
      path: '/version',
      name: 'version',
      component: Version
    },
    {
      path: '/compos',
      name: 'compos',
      component: Compos,
      redirect: to => {
        if (to.path === '/compos') {
          return '/compos/ok-input';
        }
      },
      children: [ // 子路由(参数路由)
        {path: ':id', name: 'child'}
      ]
    }
  ]

3.创建 router 实例,然后传routes 配置

const router = new VueRouter({
  routes,
  linkActiveClass: 'active' // 路由active状态
});

4.创建和挂载根实例。通过router配置参数注入路由,从而让整个应用都有路由功能。

new Vue({
  el: '#app',
  router,
  render: (h) => h(App)
});

或者可以写成

new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app');

通过上面的配置之后,路由陪陪到的组件会将渲染到App.vue里的 <router-view><router-view>.

//app.vue
<div>
    <div class='tab'>
      <div class='tab-item'>
        <router-link to="/version">version</router-link>
      </div>
      <div class='tab-item'>
        <router-link to="/compos">Compos</router-link>
      </div>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>

<style lang="stylus" rel="stylesheet/stylus">
  @import './common/stylus/mixin.styl';
  .tab
    display: flex
    width: 100%
    height: 40px
    line-height: 40px
    border-1px(rgba(7, 17, 21, 0.1))
    .tab-item
      flex: 1
      text-align: center
      & > a
        display: block
        font-size: 14px
        color: rgb(77, 85, 93)
        text-decoration: none
        &.active
          color: rgb(240, 20, 20)
</style>
<div class='compos'>
    <div class='nav'>
      <div class='nav-item'>
        <router-link :to="{ name: 'child', params: { id: ok-input }}">ok-input</router-link>
        <router-link :to="{ name: 'child', params: { id: ok-grid }}">ok-input</router-link>
      </div>
    </div>
  </div>

启动项目之后,我们看到的页面将是;

这里写图片描述

这里写图片描述

二、懒加载

https://router.vuejs.org/zh-cn/advanced/lazy-loading.html
用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下:

const routes = [
    {
      path: '/',
      component: resolve => require(['./components/version/version.vue'], resolve)
    },
    {
        path: '/compos',
        component: resolve => require(['./components/compos/compos.vue'], resolve),
        redirect: to => {
        if (to.path === '/compos') {
          return '/compos/ok-input';
        }
      },
      children: [ // 子路由(参数路由)
        {path: ':id', name: 'child'}
      ]
    }
  ]

三、路由信息对象

1.$route.path
字符串,对应当前路由的路径,总是解析为绝对路径,如 “/foo/bar”。

2.$route.params
一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。

3.$route.query
一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。

4.$route.hash
当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。

5.$route.fullPath
完成解析后的 URL,包含查询参数和 hash 的完整路径。

6.$route.matched
一个数组,包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本(还有在 children 数组)。
综合上述,一个包含重定向、嵌套路由、懒加载的main.js如下:

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App';
Vue.use(VueRouter);

const routs =  [
    {
      path: '/',
      redirect: '/version',
      component: resolve => require(['./components/version/version.vue'], resolve)
    },
    {
      path: '/compos',
      name: 'compos',
      component: resolve => require(['./components/compos/compos.vue'], resolve),
      redirect: to => {
        if (to.path === '/compos') {
          return '/compos/ok-input';
        }
      },
      children: [
        {path: ':id', name: 'child'}
      ]
    },
    {
      path: '/version',
      name: 'version',
      component: resolve => require(['./components/version/version.vue'], resolve)
    }
  ];

const router = new VueRouter({
  routes,
  linkActiveClass: 'active'
});

/* router.push('/version'); 可以代替初始化页面时的重定向*/
/* eslint-disable no-new */

new Vue({
  el: '#app',
  router,
  render: (h) => h(App)
});

声明:本文步骤为转载内容,代码是本人demo,如有问题请联系。
更详细的vue-router功能请参考文档:https://router.vuejs.org/zh-cn/


本文由【waitig】发表在等英博客
本文固定链接:Vue-Router2 实现路由功能
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)