vue-router路由简单案例介绍

首页 > 网络编程 > JavaScript > javascript技巧 更新日期: 2017-02-11
本篇文章主要介绍了vue-router路由的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

官方文档:

旧版:https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn

新版:http://router.vuejs.org/(2.0版本)

此文是旧版

文件结构图:

vue-router路由简单案例介绍

基本用法:

<router-view>是一个顶级的路由外链,用于渲染匹配的组件。

例如:我的应用入口是app.vue

那么在app.vue中添加如下代码, 此处涉及ES6。

app.vue

<template>
  <div class='page index-content'>
    <router-view class="view"
    keep-alive
    transition="slide"></router-view>
    <Footers></Footers>
  </div>
</template>
<script>
/*
*ES6模块系统特性:
1.使用export关键词导出对象。这个关键字可以无限次使用;
2.使用import关键字将其它模块导入某一模块中。它可用来导入任意数量的模块;
3.支持模块的异步加载;
4.为加载模块提供编程支持。
*/
//导入footer组件
import Footers from '../components/footer'
//导入路由
import Router from 'vue-router'
//default导出,使用关键字default,可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。它既可以用于内联导出,也可以用于一组对象导出声明中。
export default{
  components:{
    Footers
  }
}
</script>

Footer是一个公用的页脚组件,存放于components文件夹中

footer.vue

<template>
  <div class='footer'>
    <a v-link="{path:'/home'}">
      <span v-if="$route.name == 'home'" class='active'>首页</span>
      <span v-else>首页</span>
    </a>
    <a v-link="{path:'/list'}">
      <span v-if="$route.name == 'list'" class='active'>跳转1</span>
      <span v-else>跳转1</span>
    </a>
    <a v-link="{path:'/account'}">
      <!-- 根据路由名称判断选中的项 -->
      <span v-if="$route.name == 'account'" class='active'>跳转2</span><!-- 满足条件 -->
      <span v-else>跳转2</span><!--不满足-->
    </a>
  </div>
</template>
<style>
  .footer{
    background: #fff;
    border-top: 1px solid #dedede;
    display: table;
  }
  .footer a{
    display: table-cell;
    text-align: center;
    text-decoration: none;
    color: #666
  }
  .active{
    color:red !important;
  }
</style>

由于app.vue是最顶级的入口文件,在app.vue中引用footer组件的话,所有页面都会包含footer内容,但是二级页面等子页面不需要,所以得把app.vue中代码复制到index.vue中,把app.vue中footer相关的部分删掉。

在index.html中添加如下代码,创建一个路由实例。

<app></app>

在main.js中配置route.map

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'//导入vue-router
//导入组件
import App from './App'
import Index from './page/index'
import list from './page/list'
import Home from './page/home'
import Account from './page/account'
Vue.use(VueRouter)
var router = new VueRouter()
router.map({
  //默认指向index
  '/':{
    name:'index',
    component:Index,
    //子路由(有页底)
    subRoutes:{
      '/home':{
        name:'home',
        component:Home
      },
      '/account':{
        name:'account',
        component:Account
      }
    }
  },
  //没有footer
  '/list':{
    name:'list',
    component:list
  }
})
//启动一个启用了路由的应用
router.start(App,'app')

router.start中的'app',指的是index中的:<app></app>,可以取其他的名字,但是得和index中的名字一致。

这时启动项目(npm run dev)会发现,页面上只有footer,而没有显示其他内容。因为index.vue本来就只有footer而没有其他内容,但是我们肯定要显示页面,就要用到

router.redirect(redirectMap)重定向

例如:我们要默认载入home页面

在main.js中加入

//重定向到home
router.redirect({
  '*':'home'
})
router.start(App,'app')

在index中加入init()函数

<script>
export default{
  components:{
    Footers
  },
  init(){
    var router = new Router()
     router.go('/home');//跳转到home组件
    }
}
</script>

然而,经过测试,redirect并没有重定向的home,载入home的真正原因是:router.go('/home')

此时,进入项目就会显示home页面的内容了。

vue-router路由简单案例介绍

路由规则和路由匹配

Vue-router 做路径匹配时支持动态片段、全匹配片段以及查询参数(片段指的是 URL 中的一部分)。对于解析过的路由,这些信息都可以通过路由上下文对象(从现在起,我们会称其为路由对象)访问。 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新。

$route.path

字符串,等于当前路由对象的路径,会被解析为绝对路径,例如:/list,来源于route.map中配置的路径

router.map({
  '/home':{
  name:'list',
  component:Home
  } 
})

dom中

<a v-link="{path:'/list'}">前往list列表页面</a>

或者(具名路径)

<a v-link="{name:'list'}">前往list列表页面</a>

带参数跳转(例如:从列表页跳转到列表详情页)

<ul>
  <li v-for="item in alllist">
    <!--点击跳转到详情-->
    <a v-link="{ name: 'listDetail',params:{id: item.id }}">
      {{item.title}}<!--标题 -->
    </a>
  </li>
</ul>

script。

<script>
export default{
  data(){
    return{
      alllist:[]
    }
  },
  route:{
    data({to}){
      return Promise.all([
        //获取数据
        this.$http.get('http://192.168.0.1/knowledge/list',{'websiteId':2,'pageSize':5,'pageNo':1,'isTop':1})
      ]).then(function(data){
        return{
          //将获取到的数据复制给allllist数组
          alllist:data[0].data.knowledgeList
        }
      },function(error){
        //error
      })
    }
  }
}
</script>

详情页代码

<div class='article-box' v-if="!$loadingRouteData">
  <p class='font-bigger'>{{listDetail.title}}</p>
  <p class='co9a9a9a article-time'><span>阅读:{{listDetail.viewTimes}}</span><span>发布时间: {{listDetail.publishTime | timer}}</span></p>
  <div class='content-img'>
    {{{listDetail.content}}}<!--读取富文本信息-->
  </div>
</div>
<script>
export default{
  data() {
    return{
      listDetail:[],
      routeid:''
      //若不是走路由,采用另一种方式获取
      //routeid:this.$route.query.id
    }
  },
  route:{
    //id:来源于a标签的参数
    data ({to:{params:{ id}}}) {
      var that = this ; 
      that.$set('routeid',id)//获取id
      return Promise.all([
        that.$http.get('http://192.168.0.1/rest/knowledge',{'id':id}),
        ]).then(function(data){
           console.log(data)
           return{
            listDetail:data[0].data.knowledge,
          } 
      })
    }
  },
  methods:{
    collect(){
      
    }
  },
  ready(){
    var that = this;
    console.log(that.$get('routeid')) //得到传进来的id
  }
}
</script>

 此时router要做下修改

'/list':{
  name:'list',
  component:GetReceipt
},
'/listDetail/:id':{
  name:'listDetail',
  component:GetReceiptDetail
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 全面解析JavaScript的Backbone.js框架中的Router路由
    这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下Backbone 中的 Router 充当路由的作用,控制 URL 的走向,当在 URL 中使用 # 标签时生效.定义 Router 至少需要一个 Router 和一个函数来映射特定 ...
  • 通过PHP简单实例介绍文件上传
    本文通过代码实例给大家介绍php文件上传,获取文件名称.类型.大小等相关信息,完成文件的上传,本文非常具有参考借鉴价值,特此分享到平台,供大家学习php文件上传的简单例子,获取文件名称.类型.大小等相关信息,完成文件的上传,供大家学习参考. 1.上传文件的代码: code <?php //判断临时文件存放路径是否包含用户上传的文件 if(is_uplo ...
  • javaScriptNameSpace简单说明介绍
    命名空间,一看就知道主要目的是为了避免冲突.下面就来说一下如何打造自己的JavaScript命名空间.    打造JavaScript命名空间其实很简单,只需要将自己的函数.对象.变量等放在一个伪命名空间中,即用一个匿名函数包装起来.   代码如下:(function(){     function $(id){         return documen ...
  • 不错的JavaScript面向对象的简单入门介绍第1/2页
    JavaScript是一门OOP,而有些人说,JavaScript是基于对象的.1) 如何创建对象: 1. 使用constructor,例如: var obj = new Object() // var 可以省略 var obj = new Date()  2. 使用对象字面值(object literals),例如:  程序代码 var obj = &qu ...
  • 基于php中使用excel的简单介绍
    基于php中使用excel的简单介绍
    我目前使用的是phpexcel1.7.3版本, 解压缩后里面有一个PHPExcel和PHPExcel.php文件.我们主要使用那个PHP文件.见下图文件目录结构在工作中需要处理多语言的翻译问题,翻译都是写在excel表格里面.为了处理方便我就保留中文和英文两列. 这样需要将这些数据从excel中取出来,然乎保存在excel的数组中,通过使用循环数组将相应的数 ...
  • 简单介绍利用TK在Python下进行GUI编程的教程
    简单介绍利用TK在Python下进行GUI编程的教程
    这篇文章主要介绍了简单介绍利用TK在Python下进行GUI编程的教程,本文来自于IBM官方开发者技术文档,需要的朋友可以参考下我想要向您介绍能想像到的开始 GUI 编程的最简单方法,就是使用 Scriptics 的 TK 和 Tkinter 封装器.我们将与 developerWorks 中的 "Python 中的 curses 编程" ...
猜你喜欢