Vue的核心:路由的使用(附Demo源码)
2019/1/10 16:36:40

学完vue的组件后,我们今天再来学习一个vue的核心点,也就是vue的路由,该篇文章内容比较长请耐心阅读,因为这里面涉及路由的知识比较多,也花了一些精力去总结,我们一起来学习吧

NO.1 安装路由
npm i vue-router --save 这里的 --save 可以简写成 -S


也可以使用CDN的方式引入

 https://unpkg.com/vue-router/dist/vue-router.js
NO.2 引入并注册路由


我们可以先在src目录下新建一个router的文件夹,在里面创建一个文件命名为index.js

然后在main.js里引入路由,并且在app根组件挂载路由router,这样我们的路由配置文件就在src目录下的roter文件夹下的index.js文件里面,这样方便管理,如果全部都写在main.js文件里的话会很乱

 //main.js  import Vue from "vue"  import App from "./app.vue"  import router from "./router"  new Vue({    el: '#app',    router,    components: { App },    template: '<App/>'  })
NO.3 配置并使用路由
   //router文件夹下面的index.js文件的配置    import Vue from "vue"    import VueRouter from "vue-router"    import Home from "../components/Home";    import About from "../components/About";    Vue.use(VueRouter)    export default new VueRouter({      // 注意这里是routes 不要写成routers      routes:[        {          path:"/",          component:Home        },        {          path:"/home",          component:Home        },        {          path:"/about",          component:About        }      ]    })
NO.4嵌套路由


使用嵌套路由必须使用children来配置,这里的代码是二级路由,三级路由或者多层级的路由其实也是一样,在路由配置中同样嵌套一个children就可以,三级路由的代码就不写上来了,下面有源码,大家自己去下载看下就明白了

 export default new VueRouter({    mode: 'history', //去掉连接上的井号 更美观一点    // 设置路由高亮的全局calss名称    linkActiveClass:"active",    // 注意这里是routes 不要写成routers    routes:[      {        path:"/",        name:"index",  //针对传递数据的时候有用        component:Index      },      {        path:"/about",        name:"about",        component:About,        //有子级路由页面的时候重定向  一进来就显示企业简介的内容  当然也可以不写,那就只有点击后才会显示        // redirect:"/about/introduce",        // 嵌套路由开始        children:[          {            // 注意这个名称不要加路径,系统自动帮你补全路径 http://localhost:8081/about/xxx            path:"introduce",              component:Introduce          },          {            path:"culture",            component:Culture          },          {            path:"honor",            component:Honor          }        ]        // 嵌套路由结束      },      {        path:"/product",        name:"product",        component:Product      },      {        path:"/news",        name:"news",        component:News      },      {        path:"/contact",        name:"contact",        component:Contact      },    ]  })

下面我们一起来看下嵌套路由的demo

项目地址:github

1.gif

NO.5 动态路由


为什么要使用动态路由,比如写商品详情页面的时候,页面的结构是一样的,但是商品的id是不一样的,就像新闻详情页的id也是不一样的

首先先配置路由

   export default new VueRouter({      routes:[        {          path:"/product/:id",          component:Product        }      ]    })
 <!-- app.vue -->  <template>    <div id="app">      <ul>        <li><router-link to="/product/商品一">商品一</router-link></li>        <li><router-link to="/product/商品二">商品二</router-link></li>        <router-view></router-view>      </ul>    </div>  </template>


然后在product.vue中接收

 <!-- product.vue -->  <template>   <div>    这是{{$route.params.id}}   </div>  </template>
NO.6 命名视图

使用方法一  使用命名跳转的方式

首先先配置路由,这里我们可以看得到我们用name给他取了一个名字

   export default new VueRouter({      routes:[      {        path:"/about",        name: 'aboutName',        component:About      },      {        path:"/product",        name: 'productName',        component:Product      }      ]    })


然后在需要跳转的地方直接使用命名的方式跳转,这样就可以进入对应的路由

   <template>     <div id="app">     <div>     <router-link :to="{name:'aboutName'}">进入关于我们页面</router-link>     <router-link :to="{name:'productName'}">进入产品列表页面</router-link>     </div>     <router-view></router-view>     </div>    </template>

使用方法二  使用命名显示对应组件的方式

首先我们配置路由

   export default new VueRouter({      routes:[        {          path:"/",          components:{            default:Home,  //default是默认显示的视图 这里默认显示的是home组件,也就是router-view标签上面没有使用name名字就会默认显示home组件            aboutName:About,            productName:Product          }        }      ]    })


然后通过name的名称来显示不同的路由视图

   <template>      <div id="app">        <router-view></router-view><!-- default:Home, -->        <router-view name="aboutName"></router-view><!-- aboutName:About, -->        <router-view name="productName"></router-view><!-- productName:Product -->      </div>    </template>
NO.6 编程式路由导航
 <template>    <div id="app">          <button @click="btnClick">点击跳转</button>      <button @click="goBack">向上一页</button>      <button @click="goNext">向下一页</button>          <router-view></router-view>    </div>  </template>
 export default {    name: 'App',    data(){    },    methods:{      btnClick(){      this.$router.history.push('/product')      // this.$router.history.push({ path: 'product' })      // this.$router.history.push({ name: 'product'})      // this.$router.push({      //     name:'product',query:{ id:1,name:2 }  // 再补充一下获取值  id值:{{$route.query.id}} name值:{{$route.query.name}}      // });      // this.$router.push({      //     name:'product',params: { id: 123 }  // 再补充一下获取值  id值:{{$route.params.id}}      // });                    },      // router.go()方法可以前进后退多步,后退两步this.$router.go(-2),前进两步this.$router.go(2)        goBack(){          this.$router.go(-1)  //跳转到上一页        },        goNext(){          this.$router.go(1)  //跳转到下一页        }    },    components: {    }  }


除了上面的跳转到指定页面,我们也可以进行前进或者后退的导航

NO.7 路由传递参数
<template> <div id="app"> <li><router-link :to="{name:'product',params:{count:100}}">产品中心</router-link></li> <router-view></router-view> </div> </template>


然后在路由里配置

   export default new VueRouter({      routes:[        {          path:"/product/:count",          name:"product",          component:Product        }      ]    })
 <!-- product.vue -->  <template>    <div>      <div>点击后结果为:http://localhost:8080/#/product/100</div>      <div>获取参数:{{$route.params.count}}</div>    </div>  </template>


上面是一个参数,当然我们也可以设置多个参数

<template> <div id="app"> <li><router-link :to="{name:'product', params: {count:'1', id: '2'}}">产品中心</router-link></li> <router-view></router-view> </div> </template>
   export default new VueRouter({      routes:[        {          path:"/product/:count/:id",          name:"product",          component:Product        }      ]    })
 <!-- product.vue -->  <template>    <div>      <div>接受参数:{{ $route.params.count}}</div>      <div>接受参数:{{ $route.params.id}}</div>    </div>  </template>


第二种传参 使用query传参  注意这个时候路由里就不能写成 path:"/product/:count",  写成最初始的path:"/product" 这里的写成最初始的path值要和路由配置里的path值一样

<template> <div id="app"> <li><router-link :to="{path:'/product',query:{count:100}}">产品中心</router-link></li> <router-view></router-view> </div> </template>


然后在路由里配置

   export default new VueRouter({      routes:[        {          path:"/product",          name:"product",          component:Product        }      ]    })
 <!-- product.vue -->  <template>    <div>      <div>点击后结果为:http://localhost:8080/#/product?count=100</div>      <div>获取参数:{{$route.query.count}}</div>    </div>  </template>


第三种传参 使用对象传参 注意这个时候路由里就不能写成 path:"/product/:count",  写成最初始的path:"/product" 这里的写成最初始的path值要和路由配置里的path值一样

<template> <div id="app"> <li><router-link :to="{name:'product',params:{count:100,type:obj}}">产品中心</router-link></li> <router-view></router-view> </div> </template>


然后在路由里配置

   export default new VueRouter({      routes:[        {          path:"/product/:count/:type",          name:"product",          component:Product        }      ]    })


注意我们要在data里设置这个对象的值

   export default{      name:"navlist",      data(){        return {          obj:{            id:"1"          }        }      }    }


最后我们来接收

 <!-- product.vue -->  <template>    <div>      <div>跳转后结果为:http://localhost:8080/#/product/100/%5Bobject%20Object%5D</div>      <div>获取参数:{{$route.params.type.id}}</div>    </div>  </template>

猜你喜欢

全部评论: 1

加载中...

    发表评论

    标签云
    返回顶部图片