vue-router

标签: vue-router
35人阅读 评论(0) 收藏 举报
分类:

1.安装前端路由(–save保存配置)

npm install vue-router --save

2.使用路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Apple from '@/components/apple'
import Banan from '@/components/banan'

Vue.use(Router)

export default new Router({
  //接受前后切换
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
        path:'/apple/:color',
        component:Apple
    },
    {
        path:'/banan',
        component:Banan
    },
 ]
})

3.页面跳转(App.vue页面)

<router-view></router-view>
<router-link :to="{path:'apple'}">to apple</router-link>

4.路由加参数

{
        path:'/apple/:color',
        component:Apple
    }

在子组件中获取参数

methods:{
    getParam(){
        console.log(this.$route.params)
    }
}

在子页面里有子路由

{
        path:'/apple/:color',
        component:Apple,
        children:[
            {
                path:'red',
                component:Redapple
            }
        ]
    },
查看评论

VUE构建工具

随着vue2.0的发布,本课程以 vue1.0 和 webpack 为基础,主要讲解项目的构建的,涉及到的vue-router和vuex,课程中带领帮助学员快速过渡到vue 2.0上,最后一个商业实战源码的案例分析。课程紧凑,严密,风趣幽默。
  • 2016年11月08日 13:13

vue-router的使用及实现原理

前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式: 1. 在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航 2. 使用H5的wi...
  • caoxinhui521
  • caoxinhui521
  • 2017-08-29 21:35:40
  • 13297

Vue-router参考手册.CHM

  • 2016年11月21日 21:19
  • 128KB
  • 下载

vue-router + vue-loader

  • 2018年02月07日 00:54
  • 2KB
  • 下载

略分析vue三大组件:vue-router/vuex/vue-resource用途

略解释vue三大组件用途: vue-router vuex vue-resource vue组件通信 vue-router:路由配置 https://router.vuejs.org/zh-cn/...
  • qq_26445509
  • qq_26445509
  • 2017-10-01 12:12:56
  • 413

Vue-router 官方文档笔记

vue-router个人理解:Vue中的路由相当于pc里面的锚点超链接,如果点击了页面转向哪,也有点像ajax。安装npm install vue-router 开始用Vue.js + vue-r...
  • HeliumLau
  • HeliumLau
  • 2017-03-12 21:41:46
  • 13601

vue2.0 vue-router学习笔记

最近在学习vue.js 2.x。vue-router是其中十分重要的一部分。 在以前的学习中,用过很多后端的路由,比如在laravel框架中,路由的功能是根据前端不同的URL请求,根据路由匹配将请求...
  • zhangyangblog
  • zhangyangblog
  • 2017-08-29 14:04:14
  • 286

Vue-router2.0版本的使用

1.定义组件(2.0版本使用router-link作为路由标签,被渲染成) import VueRouter from 'vue-router'; Vue.use(VueRouter); ...
  • qq_36890317
  • qq_36890317
  • 2017-07-10 15:39:48
  • 252

vue-router实现分析

vue-router实现原理
  • caoxinhui521
  • caoxinhui521
  • 2017-10-09 15:13:20
  • 248

vue-router 滚动行为

在查看vue-router文档的时候,无意发现一个有意思的东西,以前都没有注意过这个问题。如下: 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 ...
  • panyang01
  • panyang01
  • 2017-12-07 19:04:25
  • 517
    个人资料
    持之以恒
    等级:
    访问量: 2073
    积分: 215
    排名: 34万+