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
