vue-router路由简单案例介绍


Posted in Javascript onFebruary 21, 2017

官方文档:

旧版: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 相关文章推荐
JavaScript 快捷键设置实现代码
Mar 13 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
微信小程序 基础组件与导航组件详细介绍
Feb 21 #Javascript
微信小程序 UI与容器组件总结
Feb 21 #Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 #Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 #Javascript
微信小程序 支付功能开发错误总结
Feb 21 #Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 #Javascript
jquery实现下拉框左右选择功能
Feb 21 #Javascript
You might like
php xml文件操作代码(一)
2009/03/20 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
jquery图片切换插件
2015/03/16 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
详解K-means算法在Python中的实现
2017/12/05 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python机器人行走步数问题的解决
2018/01/29 Python
python安装教程
2018/02/28 Python
Python numpy 点数组去重的实例
2018/04/18 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
详解Python的三种可变参数
2019/05/08 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
Python如何定义接口和抽象类
2020/07/28 Python
adidas美国官网:adidas US
2016/09/21 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
异步传递消息系统的作用
2016/05/01 面试题
六十岁生日答谢词
2014/01/10 职场文书
小学英语课后反思
2014/04/26 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
单身证明格式样本
2015/06/15 职场文书
小学毕业教师寄语
2019/06/21 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
Python如何让字典保持有序排列
2022/04/29 Python