VUE的路由器的总结

Posted 2020-10-17

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