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 相关文章推荐
jQuery 中使用JSON的实现代码
Dec 01 Javascript
js异常捕获方法介绍
Apr 10 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
Element Steps步骤条的使用方法
Jul 26 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
destoon二次开发入门示例
2014/06/20 PHP
PHP基本语法总结
2014/09/06 PHP
PHP错误机制知识汇总
2016/03/24 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
python计算auc指标实例
2017/07/13 Python
TensorFlow如何实现反向传播
2018/02/06 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
恐龙的灭绝教学反思
2014/02/12 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
机关职员工作检讨书
2014/10/23 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2014年工程师工作总结
2014/11/25 职场文书
小班下学期个人总结
2015/02/12 职场文书
社区结对共建协议书
2016/03/23 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
python双向链表实例详解
2022/05/25 Python