官方文档：

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

新版：http://router.vuejs.org/（2.0版本）

此文是旧版

文件结构图：

基本用法：

<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 做路径匹配时支持动态片段、全匹配片段以及查询参数（片段指的是 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
}

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

# vue  # router路由案例  # router  # 案例  # Vue Router路由守卫超详细介绍  # Vue Router路由hash模式与history模式详细介绍  # Vue.js：使用Vue-Router 2实现路由功能介绍  # Vue Router的介绍与引入功能详解  # 关键词  # 跳转  # 是一个  # 跳转到  # 重定向  # 指的是  # 首页  # 旧版  # 加载  # 详情页  # 发布时间  # 就会  # 不需要  # 结构图  # 要做  # 可将  # 若不是  # 创建一个  # 他的名字  # 此文 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何实现API版本控制_Laravel API版本化路由设计策略  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  如何在 Python 中将列表项按字母顺序编号（a.、b.、c. …）  魔方云NAT建站如何实现端口转发？  如何彻底删除建站之星生成的Banner？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  怎么用AI帮你为初创公司进行市场定位分析？  php做exe能调用系统命令吗_执行cmd指令实现方式【详解】  如何选择PHP开源工具快速搭建网站？  深入理解Android中的xmlns:tools属性  Laravel如何实现一对一模型关联？（Eloquent示例）  高防服务器租用指南：配置选择与快速部署攻略  Bootstrap整体框架之JavaScript插件架构  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  如何用腾讯建站主机快速创建免费网站？  Win11怎么修改DNS服务器 Win11设置DNS加速网络【指南】  Java遍历集合的三种方式  php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】  Win11怎么关闭透明效果_Windows11辅助功能视觉效果设置  深圳网站制作培训,深圳哪些招聘网站比较好？  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  nodejs redis 发布订阅机制封装实现方法及实例代码  Linux后台任务运行方法_nohup与&使用技巧【技巧】  Laravel怎么创建控制器Controller_Laravel路由绑定与控制器逻辑编写【指南】  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  如何用IIS7快速搭建并优化网站站点？  微信小程序 canvas开发实例及注意事项  Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制  Python文件流缓冲机制_IO性能解析【教程】  javascript如何操作浏览器历史记录_怎样实现无刷新导航  香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南  如何快速搭建二级域名独立网站？  laravel怎么在请求结束后执行任务（Terminable Middleware）_laravel Terminable Middleware请求结束任务执行方法  JavaScript中的标签模板是什么_它如何扩展字符串功能  Laravel Admin后台管理框架推荐_Laravel快速开发后台工具  如何用y主机助手快速搭建网站？  合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍？  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  Laravel如何使用Service Container和依赖注入？（代码示例）  详解vue.js组件化开发实践  弹幕视频网站制作教程下载,弹幕视频网站是什么意思？  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  如何快速生成橙子建站落地页链接？  简单实现Android文件上传  js实现点击每个li节点，都弹出其文本值及修改  如何在IIS管理器中快速创建并配置网站？  网站制作大概多少钱一个,做一个平台网站大概多少钱？  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  北京网站制作的公司有哪些,北京白云观官方网站？  如何在IIS中新建站点并配置端口与IP地址？