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 相关文章推荐
Eval and new funciton not the same thing
Dec 27 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
function.inc.php超越php
2006/12/09 PHP
php session 检测和注销
2009/03/16 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
javascript 写类方式之四
2009/07/05 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
关于vue里页面的缓存详解
2019/11/04 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
讲解Python中的标识运算符
2015/05/14 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
财务与信息服务专业推荐信
2013/11/28 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
2014年新生军训方案
2014/05/01 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
举起手来观后感
2015/06/09 职场文书
地震捐款简报
2015/07/21 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers