vue router的基本使用和配置教程


Posted in Javascript onNovember 05, 2018

 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分。

点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。

1.在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下:

import Vue from 'vue'
 import App from './App'
 import router from './router/index.js' // 引入路由
 Vue.config.productionTip = false 
 /* eslint-disable no-new */
 new Vue({
  el: '#app',
  router, // 在挂载点中注入vue
  components: { App },
  template: '<app/>'
 })

2.自定义配置路由路径,在src 下 router/index.js 文件中配置路由路径

import Vue from 'vue'
 import Router from 'vue-router' // 引入vue-router 
 // 引入要跳转的vue组件
 import Manage from '@/page/admin/Manage'
 import userList from '@/page/admin/userList'
 import addUser from '@/page/admin/addUser'
 import shopList from '@/page/admin/shopList'
 import addShop from '@/page/admin/addShop'
 Vue.use(Router) // 在vue中注入Router
 // 配置路由路径
 const routes =[
  {
      path: '/',
      name: 'Login',
      component: Login // 需要跳转的组件
     },
     {
      path: '/Manage',
      name: 'Manage',
      component: Manage,
      children: [{
       path: '/userList',
       component: userList,
       meta: ['数据管理', '用户列表']
      },
      {
       path: '/shopList',
       component: shopList,
       meta: ['数据管理', '商品列表']
      },
      {
       path: '/addUser',
       component: addUser,
       meta: ['添加数据', '添加用户']
      },
      {
       path: '/addShop',
       component: addShop,
       meta: ['添加数据', '添加商品']
      }
     ]
     },
     {
      path: '/home',
      name: 'Home',
      component: Home
     },
     {
      path: '/helloworld',
      name: 'Home',
      component: HelloWorld
     }
 ]
 // 将路径注入到Router中
 var router=new Router({
  'mode': 'history',
  routes
 })
 // 导出路由
 export default router;

3.在页面中使用路由

在vue-router中, 我们也可以看到它定义了两个标签<router-link><router-view><router-link> 就是定义根据某个路径跳到某个组件的标签,<router-view> 就是点击后,组件显示内容的标签。所以 <router-link> 还有一个非常重要的属性 to, 它定义点击之后,要到哪个路径下 , 如:<router-link  to="/home">Home</router-link>

总结

以上所述是小编给大家介绍的vue router的基本使用和配置教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
图片格式的JavaScript和CSS速查手册
Aug 20 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
微信小程序tabbar底部导航
Nov 05 #Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 #Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 #Javascript
小程序实现选择题选择效果
Nov 04 #Javascript
小程序实现单选多选功能
Nov 04 #Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 #Javascript
微信小程序实现登录注册tab切换效果
Dec 29 #Javascript
You might like
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP运行模式的深入理解
2013/06/03 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
Python实现文件复制删除
2016/04/19 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python简易版图书管理系统
2019/08/12 Python
手写一个python迭代器过程详解
2019/08/27 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
财务出纳员岗位职责
2013/11/26 职场文书
教师自荐信范文
2013/12/09 职场文书
争论的故事教学反思
2014/02/06 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
环保倡议书50字
2014/05/15 职场文书
技术员个人工作总结
2015/03/03 职场文书
教师求职自荐信范文
2015/03/04 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
同事去世追悼词
2015/06/23 职场文书
二婚主持词
2015/06/30 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python