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 相关文章推荐
onpropertypchange
Jul 01 Javascript
js下弹出窗口的变通
Apr 18 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 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(1) php开发环境配置
2010/02/15 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP pear安装配置教程
2016/05/14 PHP
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
JS高级运动实例分析
2016/12/20 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Python机器学习logistic回归代码解析
2018/01/17 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
霸王洗发水广告词
2014/03/14 职场文书
成绩单公证书
2014/04/10 职场文书
端午节演讲稿
2014/05/23 职场文书
建筑结构施工求职信
2014/07/11 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
被告答辩状范文
2015/05/22 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript