Vue路由vue-router

vue 路由

     vue-router2

        注意：vue-router2@2.x只适用于Vue2.x版本

     安装

　　由于以前在安装vue-cli的时候选项中就包括了vue路由这一项是否yes or no安装，因此若是要单独安装能够参考下面

        1.你也能够用 <script src="../js/vue-router.js"></script>引入这种方式，但通常用倾向于用webpack模块化的方法

        2. npm install vue-router@2.7.0 --save-dev,为了让package.json中打上一个log，后面加上--save-dev

    若是在一个模块化的工程中使用，必须经过Vue.use()明确的安装路由功能，例如

        import Vue from 'vue';
        import VueRouter from 'vue-router';
        Vue.use(VueRouter)

 

    若是使用全局的script标签，则无需如此（手动安装） 

重定向

    重定向也是经过routes配置来完成，下面就是/a到/b

        const router = new VueRouter({
            routes:[{
                path:'/a',redirect:'/b'
            }]
        })

 

    重定向也能够是命名的路由,

        const router = new VueRouter({
            routes:[{
                path:'/a',
　　　　　　　　　　name:'foo',
　　　　　　　　　　redirect:{name:'foo'}
            }]
        })

 

    或者一个方法

        const router = new VueRouter({
            routes:[{
                path:'/a',redirect:to=>{
                    //方法接收 目标路由 做为参数
                    //return 重定向 字符串路径或者路径对象
                }
            }]
        })

 

    在template标签中，可使用标签router-link进行跳转到相应的vue组件

<router-link to="/card">card</router-link>

 

    或者js methods方式跳转，这里是一个示例，能够结合下面的动态路由匹配一块儿进行

import router from '../router';//这里/index.js能够省略不用写。

      handleClick:function(index){
        //你须要router引用进来，才能进行跳转
          router.push(`/card/detail/${index}`);//es6反向引号写法，
      }

 

动态路由匹配

     点击事件

        handleClick:function(index){

            //你须要router引用进来，才能进行跳转

          router.push(`/card/detail/${index}`);//es6反向引号写法，

        }

    占位id符号：  path:'/card/detail/:id',先后两个id命名要匹配，不然没法接收到id值

    接收id值：  {{$route.params.id}}，

src文件夹下面的components文件下的card.vue组件的代码

<template>
  <div>
      我是card页面
      <ul>
        <li v-for="(data,index) in datalist" @click="handleClick(index)">{{data}}</li>
      </ul>
      <router-view></router-view>
  </div>
</template>

<script>
import router from '../router';//这里/index.js能够省略不用写。
export default {
    name:'card',
    data(){
      return {
        datalist:['card1','card2','card3',]
        };
    },
    methods: {
      handleClick:function(index){
        //你须要router引用进来，才能进行跳转
          router.push(`/card/detail/${index}`);//es6反向引号写法，
      }
    },
}
</script>

<style>
  li{list-style: none;cursor: pointer;;}
</style>

在须要接收传过来的动态参数的detail界面的代码

<template>
  <div>
      detail界面{{$route.params.id}}这里是接收详细按钮传过来的id值
  </div>
</template>

<script>
export default {
    name:'detail',
}
</script>

<style>

</style>

在src文件夹下面的router文件夹的index.js文件的routes添加路径，子组件，而且引用全部文件的路径

　　　　import Film from '@/components/film'

　　　　import Card from '@/components/card'

　　　　import Home from '@/components/home'

　　　　import NowPlaying from '@/components/nowplaying'

　　　　import ComingSoon from '@/components/comingsoon'

　　　　import Detail from '@/components/detail'

　　　　......

    {
      path:'/card',
      component:Card,
      children:[
        {
          path:'/card/detail/:id',//动态路由匹配的写法/:id这里只起到占位的做用，也能够添加多个占位符
          component:Detail
        }
      ]
    },

 

HTML5 history模式

　　

export default new Router({
  mode:'history',
})

    vue-router默认hash模式--使用URL的hash来模拟一个完整的URL，因而当URL改变时，页面不会从新加载。

    若是不想要很丑的hash模式，咱们也能够用路由的history模式，这种模式充分利用history.pushState API来完成URL的跳转无须从新加载页面，

    在index.js下面的router下面加入mode:'history',这样就去掉了地址栏中的#符号,

    不过这种模式要玩好，还须要后台的配置支持，由于咱们的应用是个单页客户端应用，若是后台没有正确的配置，当用户在浏览器直接访问http://oursite.com/user/id就会跳出404，这样的体验就很差了。

    因此呢，你要在服务器端增长一个覆盖全部状况的候选资源：若是URL匹配不到任何的静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面。