VUE的路由器的总结

vue的路由器,我们在使用vue进行开发的时候,是必须用到的一个vue自带的组件,下面进行vue经常的操作的一些说明

1.vue-router的安装

在命令行里面使用 cnpm install vue-router --save命令进行安装

在main.js或者其他使用vue-router的地方,通过import来导入  import VRouter from ‘vue-router‘

//使用vue.use来注册使用VRouter插件
Vue.use(VRouter);

import Vue from ‘vue‘
import App from ‘./App‘
import VRouter from ‘vue-router‘
import Apple from ‘./components/apple‘
import Banana from ‘./components/banana‘
import Redapple from ‘./components/redapple‘
//使用vue.use来注册使用VRouter插件
Vue.use(VRouter);
//这样VRouter作为一个类来使用,我们自己实例化这样的一个类
let router = new VRouter({
    mode: ‘history‘,
   routes: [
     {
        path: ‘/apple/:color‘,//为页面设置路由参数
        component: Apple,
        //路由嵌套
        children: [
            {
              path: ‘redapple‘,
              component: Redapple               注意:在路径上加上‘/’表示从根目录开始跳转                                                     不加‘/’表示从当前页面进行跳转
            }
        ]
     },
     {
        path: ‘/banana‘,
        component: Banana
     }
   ]
});
/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,//将这样的router放到根目录里面
  //  es6 通过render方法来使用外部引入的App组件
  render: h => h(App)
})

在上面这样使用了之后,在我们所需要的页面进行展示

 <!-- v-router的使用 -->
     <router-view></router-view>  //展示
     <router-link :to="‘apple‘"> to apple</router-link> //相当于a标签
     <router-link :to="{path:‘/banana‘,query:{color:‘yellow‘}}">to banana</router-link>
     <router-link :to="{path:‘apple/redapple‘}">to applered</router-link>

注意:除了根据path以外,我们还可以为这个路由跳转设置名字,也可以通过名字来进行路由的跳转 <router-link :to="{name:‘myba‘}">name router</router-link>

{path: ‘/banana‘,
     name: ‘myba‘,
     component: Banana}

需要特别注意的是,我们在使用v-bind进行路由的路径的绑定的时候,有两种方式,一个是直接以对象的方式进行绑定,类似于

<router-link :to="{path:‘/banana‘,query:{color:‘yellow‘}}">to banana</router-link>另外一种就是通过绑定字符串,但是这个字符串必须在data()里面进行设置,类似于
<router-link :to="‘apple‘"> to apple</router-link>
      data () {
     return {
        apple: ‘/apple‘,

       }

    } 
VUE带参数的路由跳转我们在使用vue的路由器的时候,有的时候会需要传递参数,目前我所接触的有两种方式的跳转,一个是在router的配置文件当中进行参数的配置,类似于
let router = new VRouter({
    mode: ‘history‘,
   routes: [
     {
        path: ‘/apple/:color‘,//为页面设置路由参数
        component: Apple,
        //路由嵌套
        children: [
            {
              path: ‘redapple‘,
              component: Redapple
            }
        ]
     },
     {
        path: ‘/banana‘,
        component: Banana
     }
   ]
});

然后在apple.vue这个页面通过$route.params进行获取到所传递的参数

<template>
<div>
{{ msg }}
<p>{{ $route.params.color }}</p>
<button @click="getparams">get params</button>
<router-view></router-view>
<router-link :to="{path:‘apple/redapple‘}">to red apple</router-link>
</div>
</template>


<script>
export default {
data () {
return {
msg: ‘i am apple‘
}
},
methods: {
getparams () {
console.log(this.$route.params);
}
}
}



另外一种是直接在页面当中<router-link></router-link>里面通过query进行参数的绑定
 <router-link :to="{path:‘/banana‘,query:{color:‘yellow‘}}">to banana</router-link>

<template>
  <div>
    {{ msg }}
    {{$route.query.color}}
   <button @click="getparams">get params</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
     msg: ‘i am banana‘
    }
  },
  methods: {
    getparams () {
      console.log(this.$route.query.color);
    }
  }
}
</script>
他们之间的区别我认为就是一个是需要自己去在后面加上/参数,http://localhost:8080/apple/apple  
一个是点击了之后直接在地址后面加上hash,   http://localhost:8080/banana?color=yellow(这种的比较好接受);

VUE的地址重定向我们在网站当中往往是http://localhost:8080访问的是app.vue的界面,这个时候我们想让我们的网站打开的时候,直接是apple.vue的界面,这个时候我们就用到了vue的地址重定向的功能,我们需要在routers的配置里面加上这个就可以了
et router = new VRouter({
    mode: ‘history‘, //去掉地址栏中默认的#hash
   routes: [
   {
     path: ‘/‘,//表示根目录
     redirect: ‘/banana‘  //表示你要重定向的位置
   },
{
        path: ‘/banana‘,
        component: Banana
     }
}
其他的使用方法暂时还没有用到,后期用到了之后会更新关于这个带路由参数的跳转,参考了 http://www.jb51.net/article/114432.htm

				
时间: 2024-11-09 05:57:49

VUE的路由器的总结的相关文章

Vue 全家桶

第 1 章:Vue 核心 1.1. Vue 的基本认识1.1.1. 官网1) 英文官网: https://vuejs.org/2) 中文官网: https://cn.vuejs.org/ 1.1.2. 介绍描述1) 渐进式 JavaScript 框架2) 作者: 尤雨溪(一位华裔前 Google 工程师)3) 作用: 动态构建用户界面 1.1.3. Vue 的特点1) 遵循 MVVM 模式2) 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发3) 它本身只关注 UI, 可以轻松引入 v

用 Vue.js + Firebase 製作即時聊天功能

這幾天在練習用vue & firebase刻一個仿line即時同步聊天的功能,直接初體驗vue.js + firebase + webpack三種願望一次滿足XD! update: 20170923更新[用 Vue.js + Firebase 製作即時聊天功能(2) - storage](https://guahsu.io/2017/09/vue-firebase-realtime-line-chat-2-storage/) >DEMO< >原始碼-GitHub< 這幾天想

5.0 路由组件的使用

一.概述 路由器:路由器管理路由; 路由:路由是一种映射关系,一个key对应一个value,key是path,对于后台路由,     value是处理请求的回调函数,对于前台路由value是组件. 说明:1) 官方提供的用来实现 SPA(单个页面) 的 vue 插件2) github: https://github.com/vuejs/vue-router3) 中文文档: http://router.vuejs.org/zh-cn/4) 下载: npm install vue-router --

向路由组件传递数据

1.需求:点击对应的message显示该message的详情 2.步骤 2.1.在src/router/index.js中配置路由时使用占位符指定需要的传参 /* 路由器模块 */ // 引入Vue import Vue from 'vue' // 引入路由器插件 import VueRouter from 'vue-router' // 引入路由组件 import About from '../views/About' import Home from '../views/Home' impo

Vue路由器的简单实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <script src="bower_componen

包学会之浅入浅出 Vue.js:开学篇

2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React.Angular.Vue.没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点.面试的时候不吹上一点新技术,好像自己就不是搞前端的似的.当然,希望大家都是抱着好学的心来开始一门学艺的,不管怎样,求求你,请接着看下去吧~ 本系列文将会通过很多一目了然的例子和一个实战项目--组件库,来帮助大家学习Vue,一步一步来,毕竟这篇文章还有接下来的[升学篇]和[结业篇]呢. 什么是Vue.js 不

gulp+webpack+vue

gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleReplacementPlugin 2.5打包生产环境代码 3.把命令都整合到npm中 4.后续 1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命令打

vue路由

ue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版.乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-web

Vue.js&mdash;&mdash;vue-router 60分钟快速入门

概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版.乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue