精华内容
下载资源
问答
  • Vue-Router Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有: 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡...

    Vue-Router 介绍

    Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

    嵌套的路由/视图表
    模块化的、基于组件的路由配置
    路由参数、查询、通配符
    基于 Vue.js 过渡系统的视图过渡效果
    细粒度的导航控制
    带有自动激活的 CSS class 的链接
    HTML5 历史模式或 hash 模式,在 IE9 中自动降级
    自定义的滚动条行为

    那什么又是单页面应用(SPA)?

    一个项目中只有一个完整的html主页面,其它都是html片断组成的分页面。浏览器一开始会在主页面加载所有必须的文件,即第一次进入页面的时候会请求一个html文件,在页面跳转交互时由路由将分页面载入到主页面,这时路径也相应的发生变化,页面内容也发生变化,但是并没有新的html请求。js感知到url的变化后动态的将当前页面的内容清除然后将下一个页面的内容挂载到当前页面上。这时前端就要判断到底是哪个页面进行显示,哪个页面进行清除。这个过程就是单页面应用。与之相对的是多页面应用(MPA),即一个项目是由多个完整的html页面组成,不存在在主分页面的说话,每一次页面跳转所有的资源都要重新进行加载,后台服务器都会返回一个新的html文档。就像传统的页面应用,它们是用超链接来实现页面切换和跳转的。

    以下需要在Idea中配置一下:

    Vue-router安装

    npm install vue-router  --save-dev		#表示安装到当前目录
    

    注意:vue-cli 创建一个项目在当前项目下 安装vue-router

    Src目录下 新建一个router (路由)目录,目录下新建 index.js

    1.引入模块

     import VueRouter from 'vue-router'
    

    2.作为vue的插件,安装插件

      Vue.use(VueRouter)
    

    4.components组件中创建组件

    <!--模板-->
    <template>
        <h1>内容页</h1>
    </template>
    
    <!--js-->
    <script>
        export default {
            name: "Content"
        }
    </script>
    
    <!--css 样式修饰-->
    <style scoped>
    </style>
    

    3.创建导出路由实例对象

    //引入组件
    import Content from "../components/Content";
    
    //创建路由对象并配置路由规则
    export default new VueRouter({		#实例对象名字要与引入模块所写名一致
      routes:[
        {
        //路由路径		这里组件是我自己创建的组件
        path:'/content',
        //路由名字
        name:'Content',
        //要跳转的组件
        component:Content
        },
      ]
    })
    
    

    4.在main.js里面引入的:import router from ‘./router’,得到一个路由实例

    //自动扫描配置中的路由
    import router from './router'
    

    5.让vue知道我们的路由规则

    new Vue({
    	//配置路由
        router
    })
    

    6.然后在App.vue里面,

    <router-link to="/content">内容页</router-link>
    

    7.写入<router-view></router-view>,展示对应渲染的组件

    <router-view></router-view>
    

    8.最后就可以启动vue项目,访问web http://localhost:8080/

    npm run dev
    

    实例部分:
    在components创建两个组件:

    Content.vue

    <template>
        <h1>内容页</h1>
    </template>
    
    <script>
        export default {
            name: "Content"
        }
    </script>
    <!---->
    <style scoped>
    
    </style>
    

    Main.vue

    <template>
      <h1>首页</h1>
    </template>
    
    <script>
        export default {
            name: "Main"
        }
    </script>
    
    <style scoped>
    
    </style>
    

    Src目录下 新建一个router (路由)目录,目录下新建 index.js配置完成的路由信息

    /*主配置*/
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    //引入组件
    import Content from "../components/Content";
    import Main from "../components/Main";
    
    //安装路由
    Vue.use(VueRouter)
    
    
    //配置导出路由
    export default new VueRouter({
      routes:[
        {
        //路由路径
        path:'/content',
        //路由名字
        name:'Content',
        //要跳转的组件
        component:Content
        },
        {
          //路由路径
          path:'/main',
          //路由名字
          name:'Main',
          //要跳转的组件
          component:Main
        }
    
      ]
    })
    

    main.js:应用的入口文件【js文件入口】

    /*入口*/
    import Vue from 'vue'
    import App from './App'
    //自动扫描配置中的路由
    import router from './router'
    
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      //配置路由
      router,
      components: { App },
      template: '<App/>'
    })
    

    App.vue:根组件,整个组件的入口【组件文件入口】

    <template>
      <div id="app">
        <div><h1>我是泛滥</h1></div>
        <!--路由控制-->
        <!-- router-link 定义点击后导航到哪个路径下  相当于<a>标签-->
        <router-link to="/main">首页</router-link>
        <router-link to="/content">内容页</router-link>
        <!-- 对应的组件内容渲染到router-view中 -->
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      components: {
    
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    
    

    接下来就可以访问web端查看自己写的vue

    在这里插入图片描述

    展开全文
  • vue-router 是什么?它有哪些组件

    千次阅读 2020-03-21 14:59:23
    路由中有三个基本的概念 route, routes, router。 1, route,它一条路由,由这个英文单词也可以看出来,它单数, Home按钮 => home内容, 这一条route, about按钮 => about 内容, 这另一条路由。 2...

    路由中有三个基本的概念 route, routes, router。

    1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。

    2, routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]

    3, router 是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。

    4,客户端中的路由,实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候,about 中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.
    路由跳转等都需要vue-router
        在这里插入图片描述
    注:转载

    展开全文
  • Vue-Router是Vue.js官方的路由管理器, 开发者可以自由选择是否使用Vue-Router作为路由管理器, 因为它是作为Vue插件的形式被安装到Vue中的. 如何安装一个Vue插件 如果插件是一个对象, 必须提供install方法. 如果插件...

    Vue-RouterVue.js官方的路由管理器, 开发者可以自由选择是否使用Vue-Router作为路由管理器, 因为它是作为Vue插件的形式被安装到Vue中的.

    如何安装一个Vue插件

    如果插件是一个对象, 必须提供install方法. 如果插件是一个函数, 它会被作为install方法. install方法调用时, 会将Vue作为参数传入. 该方法需要在调用new Vue()之前被调用

    install方法被同一个插件多次调用, 插件将只会被安装一次

    以上是官方文档的描述, 我们还是看代码吧

    // 该方法会在initGlobalAPI初始化全局api的时候被执行
    export function initUse (Vue: GlobalAPI) {
      // 在Vue对象上添加use方法, 方法的参数可以是方法或者对象
      Vue.use = function (plugin: Function | Object) {
        // 获取当前实例已经安装过插件列表
        const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
        // 判断是该插件是否已经被安装过
        // 也就是文档描述的, 当同一个插件多次调用, 插件将只会被安装一次
        if (installedPlugins.indexOf(plugin) > -1) {
          return this
        }
    
        // 额外的参数
        const args = toArray(arguments, 1)
        // 把当前实例插入到参数数组的首位
        args.unshift(this)
        if (typeof plugin.install === 'function') { // 这里判断plugin是否提供了install方法
          // 调用plugin.install, 并传入额外的参数
          plugin.install.apply(plugin, args)
        } else if (typeof plugin === 'function') {  // 否则, 如果plugin是一个函数, 它会被作为install方法
          // 把plugin作为install调用, 并传入额外的参数
          plugin.apply(null, args)
        }
        // 把当前插件添加到已安装插件列表中
        installedPlugins.push(plugin)
        return this
      }
    }
    
    复制代码

    在代码中能更加清晰地了解到官方文档所描述的内容

    Vue-Router的install

    如果在一个模块化工程使用Vue-Router, 必须通过Vue.use()明确地安装路由功能

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    复制代码

    而在VueRouter被定义的时候, 已经定义了VueRouter.installVue.use(VueRouter)执行其install方法

    既然都定义了VueRouter.install方法, 那就顺便看一下install过程VueRouter都干了什么吧

    // 这个方法的第一个参数是Vue构造函数, 第二个参数是一个可选对象
    export function install (Vue) {
      // 确认install只会调用一次
      if (install.installed && _Vue === Vue) return
      // 定义该插件已经被安装
      install.installed = true
    
      // 把Vue赋值给全局变量
      _Vue = Vue
    
      // 判断变量v是否不为undefined
      const isDef = v => v !== undefined
    
      const registerInstance = (vm, callVal) => {
        let i = vm.$options._parentVnode
        if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
          i(vm, callVal)
        }
      }
    
      // Vue.mixin 注入组件
      Vue.mixin({
        beforeCreate () {
          // 判断组件是否存在router对象, 该对象只在根组件上有
          if (isDef(this.$options.router)) {
            // 根路由设置为自己
            this._routerRoot = this
            this._router = this.$options.router
            // 调用VueRouter实例的init()方法, 初始化路由
            this._router.init(this)
            // 为_route属性实现双向绑定
            Vue.util.defineReactive(this, '_route', this._router.history.current)
          } else {
            // 用于router-view层级判断
            this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
          }
          registerInstance(this, this)
        },
        destroyed () {
          registerInstance(this)
        }
      })
    
      // 定义Vue.$router的返回值
      Object.defineProperty(Vue.prototype, '$router', {
        get () { return this._routerRoot._router }
      })
    
      // 定义Vue.$route的返回值
      Object.defineProperty(Vue.prototype, '$route', {
        get () { return this._routerRoot._route }
      })
    
      // 全局注册组件router-view和router-link
      Vue.component('RouterView', View)
      Vue.component('RouterLink', Link)
    
      // 获取自定义选择合并策略
      const strats = Vue.config.optionMergeStrategies
      // beforeRouteEnter, beforeRouteLeave, beforeRouteUpdate 与 created使用相同的合并策略
      strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
    }
    
    复制代码

    以上就是Vue.use(VueRouter)的过程, 这也是为什么Vue-Router能被Vue使用的实现, 了解这些等于知道如何开始自己开发Vue插件了

    展开全文
  • 使用webpack创建vue项目时,会提示:install vue-router?...你可以 router-view 当做一个容器,它渲染的组件你使用vue-router指定的。 1、安装vue-router: 项目的src目录下会多出一个router文件夹,且A

    使用webpack创建vue项目时,会提示:install vue-router?(Y/N),下面讲一下区别:

    首先说一下路由是做什么的?

    构建 SPA (单页应用) 时,方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器,它渲染的组件是你使用vue-router指定的。

    1、安装vue-router:

    项目的src目录下会多出一个router文件夹,且App.vue的内容是这样的:

    多出一对<router-view></router-view>标签,router-view标签主要是将路由路径所指定的组件渲染到页面中,此时可以将所有的路由路径写在router文件夹里的index.js里,实现在url上输入不同的路径从而渲染不同的组件。

    2、不安装vue-router
    项目的src目录下会没有router文件夹,且App.vue的内容是这样的:


    如果要实现上面的路由的话,需要先使用npm install vue-router --save安装vue-router到node-modules,此时可以把路

    路径写入mian.js里,或者重新建立router文件夹,但需要修改App.vue里的内容,添加<router-view></router-view>

    标签

    展开全文
  • 1.1 什么是路由? 说起路由你想起了什么? 路由一个网络工程里面的术语。 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. — 维基百科 额, 啥玩意? 没听懂 在生活中, 我们有没有听说过...
  • 主要介绍了讲解vue-router什么是嵌套路由,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 手写vue-router核心原理 文章目录手写vue-router核心原理一、核心原理1.什么是前端路由?2.如何实现前端路由?hash 实现history 实现二、原生js实现前端路由1.基于 hash 实现2.基于 history 实现三、基于Vue实现Vue...
  • vue-router

    千次阅读 2019-10-20 16:34:08
    vue-router是什么 vue-router有哪几种方法 怎么只用vue-router 单页面应用: 基于路由和组件 route: 一条路由 routes:一组路由 router: 管理路由 客户端中的路由: dom元素显示或者隐藏。==》基于hash和基于...
  • 浅析vue-router原理

    2020-12-10 20:48:27
    vue-router是什么? 首先我们需要知道vue-router是什么,它是干什么的? 这里指的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。 换句话说,vue-router就是WebApp的链接路径...
  • 主要介绍了讲解vue-router什么是动态路由,详细的介绍了什么是动态路由,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue-router什么是动态路由
  • vue-router是什么呢? 它就是由前端来控制页面的跳转(但其实是个单页面),根据不同的 url 地址展示不同的内容和页面。 安装 1、在项目根目录敲 npm install vue-router -S 2、安装完之后,在main.js文件中配置...
  • Vue-Router

    2018-12-05 19:22:00
    vue-router是什么~~ vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容。 vue-router的安装和基本配置 vue-router.js 可以下载 也可以用cdn,基本配置信息看如下代码~~~ // ...
  • 编程式路由在我们的项目使用过程中最常用的的方法了。这篇文章主要介绍了讲解vue-router什么是编程式路由,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 二、vue-router是什么 这里的路由并不是指我们平时所说的硬件路由器, 这里的路由就是SPA(单页应用)的路径管理器 。再通俗的说,vue-router就是WebApp的链接路径管理系统。 vue-router是Vue.js官方的路由插件,它...
  • 学习vue-router

    2020-06-23 17:47:26
    从头开始学习vue-router一、前言 ...二、vue-router是什么 这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是WebApp的链接路径管
  • vue-router是Vue.js官方提供的路由插件,是Vue.js一个很重要的概念,在开始vue-router的说明之前,一些概念需要先理解。 一)基础概念理解 1、路由 路由是一个网络工程里面的术语。路由(routing)就是通过互联...
  • Vue-Router相关

    2019-09-22 13:55:14
    vue-router是什么?  vue-router是Vue的路由系统,定位资源的,可以不进行整页刷新去切换页面内容。 二vue-route安装和配置  vue-router.js 可以下载 也可以用cdn。  <script src=...
  • 近期被问到一个问题,在你们项目中使用的是Vue的SPA(单页面)...首先我们需要知道vue-router是什么,它是干什么的? 这里指的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器...
  • vue-router详解

    万次阅读 多人点赞 2018-06-14 09:46:14
    一、前言要学习vue-...等等这些问题,就是本篇要探讨的主要问题vue-router二、vue-router是什么这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-rou...
  • 2.vue-router 是什么?它有哪些组件 答:vue用来写路由一个插件。有router-link、router-view 3.active-class 是哪个组件的属性? 答:vue-router模块的router-link组件。children数组来定义子路由 4.怎么定义 ...
  • vue-router是什么?首先我们需要知道vue-router是什么,它是干什么的?这里指的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。 换句话说,vue-router就是WebAp...
  • Vue基础入门---Vue-router

    千次阅读 2018-09-02 17:23:24
    要学习vue-router就要先知道这里的路由是什么?这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。 有的小...
  • 这次先来一起看看 vue-router 初始化时做了什么。 vue router 的初始化使用步骤 我们首先来看 vue-router 的使用步骤,然后再分别去看各个步骤都发生了什么。 使用 vue-router 需要经过一下几个步骤: 引入 vue-...
  • vue-router原理

    2019-03-13 19:16:59
    一、前言 要学习vue-router就要先知道这里的路由是什么?...二、vue-router是什么 这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是We...
  • Vue.js-vue-router

    2018-06-01 14:35:50
    一、vue-router是什么怎么用vue-router允许我们通过不同的 URL 访问不同的内容。指导一个网页层级,以及定位资源用的,这个库可以帮助我们快速的开发一个单页应用,每一页的状态和页面的数据都是可以保留的,而这种...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,418
精华内容 567
关键字:

vue-router是什么

vue 订阅