Vue--路由(vue-router)

第一步: 安装   sudo  npm  install  vue-router  --save

第二步:在src文件夹下新建router文件夹,里面专门用来存放路由相关的内容,(主要是为了代码的结构清晰,避免main.js过于臃肿)

第三步;在main.js文件里引用router

图一   main.js

第四步:在components文件夹下创建Cat,Dog俩个组件(用来做路由切换),同时也创建Type1和Type2两个组件,作为Dog的子路由

图二  Cat组件 图三    Dog组件

第五步:在App.vue文件下,在template便签内,引用<router-view></router-view>标签,用来显示路由的组件,<router-link></router-link>标签 用来路由之间的跳转

图四    App.vue

第六步:配置好 router / index.js

图五   router/index.js

补充:

  1.  路由跳转的时候,可以增加css样式

            系统默认会在当前的路由加上.router-link-active的类名,可以直接在App.vue文件/style标签里面,设置.router-link-   active{backdtound:red}, 

            如果感觉类名太长,也可以自己设置,   方法: 在router/index.js中,routes数组的同级加上linkActiveClass:"active",属性,那么在App.vue里就可以直接用.active

2.   如果jquery和路由冲突,解决方法--------安装jquery

        a,   安装jq   npm  install  jquery  --save

        b,   在main.js中引入   import  $  from  'jquery'

        c,   在build.webpack.dev.conf.js中,plugings数组中加入

                new webpack.ProvidePlugin({

                                 jQuery: "jquery",

                                  $: "jquery"

        })

        重新启动项目  npm run dev 

图六  build.webpack.dev.conf.js

3,编程式路由

        <button @click="jumpCat">点击我跳转到猫路由</button>

        methods中写上jumpCat方法

                jumpCat( ){

                    this.$router.push({

                                path:'/cat'

                    })

         }