vue router 配置路由的方法


Posted in Javascript onJuly 26, 2018

用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。

路由的基本实现

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  /* 实现当前 路由导航高亮 */
  .router-link-exact-active, .router-link-active {
   color: red;
   font-size: 30px;
  }
 </style> 
</head>

<body>
 <div id="app">
  <!-- 路由的入口,也就是a标签 -->
  <router-link to="/home">home</router-link>
  <router-link to="/about">about</router-link>

  <!-- 指定页面中路由的出口,也就是:路由匹配组件将来展示在页面中的位置 -->
  <router-view></router-view>
 </div>

 <script src="./vue.js"></script>
 <!-- 引入 路由插件 -->
 <script src="./node_modules/vue-router/dist/vue-router.js"></script>
 <script>
  /* 
   路由的使用步骤:
   1 引入 路由插件的js文件
   2 创建几个组件
   3 通过 VueRouter 来创建一个路由的实例,并且在参数中配置好路由规则
   4 将 路由实例 与 Vue实例关联起来,通过 router 属性
   5 在页面中使用 router-link 来定义导航(a标签) 路由路口
   6 在页面中使用 router-view 来定义路由出口(路由内容展示在页面中的位置)
   */

  // Vue中的路由是:哈希值 和 组件的对应关系

  // component 方法能够返回一个对象,用这个对象就可以表示当前组件
  const Home = Vue.component('home', {
   template: `<h1>这是 Home 组件</h1>`
  })
  const About = Vue.component('about', {
   template: `<h1>这是 About 组件</h1>`
  })

  // 配置路由规则
  const router = new VueRouter({
   // 通过 routes 来配置路由规则,值:数组
   routes: [
    // 数组中的每一项表示一个具体的路由规则
    // path 用来设置浏览器URL中的哈希值
    // componet 属性用来设置哈希值对应的组件
    { path: '/home', component: Home },
    { path: '/about', component: About },
    // redirect 重定向: 让当前匹配的 / ,跳转到 /home 对应的组件中, 也就是默认展示: home组件
    { path: '/', redirect: '/home' }
   ]
  })

  var vm = new Vue({
   el: '#app',

   // Vue的配置对象中有一个配置项叫做:router
   // 用来指定当前要使用的路由
   // router: router
   router
  })
 </script>
</body>

</html>

重定向

解释:将 / 重定向到 /home

{ path: '/', redirect: '/home' }

路由导航高亮

说明:当前匹配的导航链接,会自动添加router-link-exact-active router-link-active类

路由参数

  • 说明:我们经常需要把某种模式匹配到的所有路由,全都映射到同一个组件,此时,可以通过路由参数来处理
  • 语法:/user/:id
  • 使用:当匹配到一个路由时,参数值会被设置到 this.$route.params
  • 其他:可以通过 $route.query 获取到 URL 中的查询参数 等
// 链接:
<router-link to="/user/1001">用户 Jack</router-link>
<router-link to="/user/1002">用户 Rose</router-link>

// 路由:
{ path: '/user/:id', component: User }

// User组件:
const User = {
 template: `<div>User {{ $route.params.id }}</div>`
}

嵌套路由 - 子路由

  • Vue路由是可以嵌套的,即:路由中又包含子路由
  • 规则:父组件中包含 router-view,在路由规则中使用 children 配置
// 父组件:
const User = Vue.component('user', {
 template: `
  <div class="user">
   <h2>User Center</h2>
   <router-link to="/user/profile">个人资料</router-link>
   <router-link to="/user/posts">岗位</router-link>
   <!-- 子路由展示在此处 -->
   <router-view></router-view>
  </div>
  `
})

// 子组件:
const UserProfile = {
 template: '<h3>个人资料:张三</h3>'
}
const UserPosts = {
 template: '<h3>岗位:FE</h3>'
}

{ path: '/user', component: User,
 // 子路由配置:
 children: [
  {
   // 当 /user/profile 匹配成功,
   // UserProfile 会被渲染在 User 的 <router-view> 中
   path: 'profile',
   component: UserProfile
  },
  {
   // 当 /user/posts 匹配成功
   // UserPosts 会被渲染在 User 的 <router-view> 中
   path: 'posts',
   component: UserPosts
  }
 ]
}

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

Javascript 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
JavaScript 去重和重复次数统计
Mar 31 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 #Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 #Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 #Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 #Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 #Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 #Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 #Javascript
You might like
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
浅析php创建者模式
2014/11/25 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python中几个比较常见的名词解释
2015/07/04 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
Python随机函数random()使用方法小结
2018/04/29 Python
Python中反射和描述器总结
2018/09/23 Python
python实现名片管理器的示例代码
2019/12/17 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
python脚本第一行如何写
2020/08/30 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android