vue router的基本使用和配置教程

　路由，其实就是指向的意思，当我点击页面上的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的基本使用和配置教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue router使用query和params传参的使用和区别

    vue router使用query和params传参的使用和区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456

  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由

  • 使用vue-router为每个路由配置各自的title

    传统方法 以前在单页面路由中,就只能在html文件中定一个固定的网站的title.如果想要动态的去修改,需要使用如下的方法. document.title = '这是一个标题'; 这样会让我们做很多无用功.显得十分蠢. 使用Vue-Router的方法 首先打开/src/router/index.js文件. 找到如下代码. const vueRouter = new Router({ routes, mode: 'history', linkActiveClass: 'active-link',

  • 详解vue2路由vue-router配置（懒加载）

    vue路由配置以及按需加载模块配置 1.首先在component文件目录下写俩组件: First.vue: <template> <div>我是第一个页面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add &

  • 在vue-cli脚手架中配置一个vue-router前端路由

    前言 这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容,分享出来供打击参考学习,下面来一起看看详细的介绍: 首先你需要一个main.js文件 //然后引入vue-router import VueRouter from 'vue-router'; //使用路由 Vue.use(VueRouter); //当然如果需要有组件进来的时候也是需要引入的 import Home from '../components/Home.vue'; import New

  • Vue中在新窗口打开页面及Vue-router的使用

    背景 在开发提分加项目的过程中,遇到了点击下拉菜单时在新窗口中打开页面,由于之前一直做的是单页面应用,没有碰到过类似的需求,于是上网搜了一下解决办法,也再次系统地温习了一下vue-router. 解决 使用路由对象的resolve方法解析路由,可以得到location.router.href等目标路由的信息.得到href就可以使用window.open开新窗口了. const {href} = this.$router.resolve({ name: "statistics-explain&qu

  • vue router的基本使用和配置教程

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 1.在main.js文件中引入相关模块

  • Vue Router中应用中间件的方法

    中间件是我们在软件开发中的一个古老而强大的概念,当我们在应用程序中使用路由相关模式时,它非常有用. 如果您不太了解中间件的含义,Nodejs框架Express里的中间件可以帮助您了解它们的工作原理. 但是,中间件仅适用于后端吗? 不,当应用程序中有路由时,中间件在前端或后端中就会非常常见.比如现在流行的单页应用程序. 有一些示例可以说明,何时可以使用中间件: 不允许未登录用户访问您的网页. 仅允许某些类型的用户查看页面(角色:管理员,作者等) 数据采集. 重置设置或清理存储空间. 限制访问用户的

  • Vue Router history模式的配置方法及其原理

    vue-router分为 hash和 history模式,前者为其默认模式,url的表现形式为 http://yoursite.com#home,比较难看.后者的url表现形式为 http://yoursite.com/home,比较美观. 但如果要使用 history模式,我们需要在后端进行额外配置.本文将讨论如何配置以及为什么要这样配置. history模式的配置方法 我们来看看官方文档是教我们怎么配置的:HTML5 History 模式. 首先要将 mode设置为 history: con

  • Vue+webpack项目基础配置教程

    最近在学习webpack,跟着课程一个单页面应用,在这里记录一下.这个部分主要讲了如何配置webpack的环境,以及webpack dev的配置. 记录比较粗略,后续会更新. 1.开发环境:vscode,node.js,vue.js,webpack 大家自己安装一下node.js可以参考菜鸟教程 使用的IDE是 VScode 2.项目初始化 快捷键ctrl+` 打开vscode控制台 vscode界面 2.1安装webpack vue vue-loader npm init npm i webp

  • vue-cli3中vue.config.js配置教程详解

    前言 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的

  • vue eslint简要配置教程详解

    在前端开发过程中,难免习惯了 console.log . 但是刚入门vue时,基于vue-cli 3.x,运行时终端老抛出error.一看信息,发现是不能使用 console.log ,另外import后的但是没有使用的变量也提示error信息,这是不错的. 1. 修改rules 但的你想去掉console提示?那可以通过 package.json 修改 rules 规则. 在package.json中,有这几其中的一项,在 rules 中添加 "no-console": "

  • vue+eslint+vscode配置教程

    vue+eslint+vscode配置教程

    package.json文件所需要的eslint包 "scripts": { "lint": "eslint --ext .js,.vue src", }, "devDependencies": { "babel-eslint": "^8.2.1", "eslint": "^4.15.0", "eslint-config-airbnb-b

  • vue基础ESLint Prettier配置教程详解

    vue基础ESLint Prettier配置教程详解

    目录 引言 前言 安装 VsCode 插件 配置 VsCode "Workspace.json" 配置 vue 的 "package.json" 配置 vue 的 ".eslintrc.js" 配置 vue 的 ".prettierrc" 配置 "eslint --fix" 一键修复 配置 ESlint 提交时检测 测试配置效果 问题排查 尾声 引言 VsCode + Vue + ESLint + Pret

  • Vue3实战学习配置使用vue router路由步骤示例

    Vue3实战学习配置使用vue router路由步骤示例

    目录 引言 一.目录结构 二.版本依赖 三.配置路由 四.使用路由 引言 随着Vue版本的升级,Vue 2.x项目和Vue 3.x项目在使用vue-router上有些区别,本文就简单介绍下vue-router在Vue3中的配置和使用. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ views/ home.vue list.vue ro

  • vue.config.js完整配置教程

    目录 引言 1 介绍 查看默认的webpack配置 vue.config.js文件 2 基本配置 3 插件及规则的配置 4 规则rules的配置 4.1 rules的新增 4.2 rules的修改 5 插件plugins 的配置 5.1 plugins的新增 5.2 plugins的修改 5.3 plugins的删除 6 一些常见的配置 6.1 修改enter文件 6.2 DefinePlugin 6.3 自定义filename 及 chunkFilename 6.4 修改html-webpac

随机推荐