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源码不错的工具
Dec 26 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
URL Rewrite的设置方法
2007/01/02 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
Tensorflow卷积神经网络实例
2018/05/24 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
Python实现对adb命令封装
2020/03/06 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
如何用python批量调整视频声音
2020/12/22 Python
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
香港礼品网站:GiftU eshop
2017/09/01 全球购物
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
股权转让意向书
2014/04/01 职场文书
竞赛口号大全
2014/06/16 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书