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实现仿Windows关机效果
Mar 10 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 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/02/08 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
Python编程中的for循环语句学习教程
2015/10/14 Python
Python实现简单字典树的方法
2016/04/29 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
基于Python List的赋值方法
2018/06/23 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python使用列表的最佳方案
2020/08/12 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
2014年库房工作总结
2014/11/26 职场文书
工作简历自我评价
2015/03/11 职场文书
给朋友的道歉短信
2015/05/12 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python