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 相关文章推荐
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
微信小程序 基础组件与导航组件详细介绍
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环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
js 窗口抖动示例
2013/09/04 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python列表(list)常用操作方法小结
2015/02/02 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Python元组常见操作示例
2019/02/19 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Python读取yaml文件的详细教程
2020/07/21 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
档案接收函范文
2014/01/10 职场文书
员工培训邀请函
2014/01/11 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
培训讲师开场白
2015/06/01 职场文书
无工作证明怎么写
2015/06/15 职场文书
运动会班级前导词
2015/07/20 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技