java1234开源博客系统
博客信息

vue Router路由基本使用

0
发布时间:『 2019-07-27 22:51』  博客类别:Vue.js  阅读(202)

vue Router路由基本使用


vue Router路由组件是vue的核心组件;

平时我们通过路由组件来实现导航菜单以及各种页面切换;


vue Router路由组件安装;

我们用vue-cli初始化的时候,可以选择添加vue Router;

也可以单独 执行 npm install vue-router --save 来安装;


我们首先建两个目录 router和pages,分别放路由路由模块配置文件和组件文件


再建两个组件Index.vue和Menu1.vue;

Index.vue

<template>
    <div>
      Index首页
    </div>
</template>

<script>
  export default {
    name: 'Index'
  }
</script>

<style scoped>

</style>


Menu1.vue

<template>
    <div>
      菜单一
    </div>
</template>

<script>
  export default {
    name: 'Menu1'
  }
</script>

<style scoped>

</style>


router下建个路由配置文件index.js

/*
路由器模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

import Index from '../pages/Index'
import Menu1 from '../pages/Menu1'

Vue.use(VueRouter)

export default new VueRouter({
  // 多个路由
  routes:[
    {
      path:'/index',
      component:Index
    },
    {
      path:'/menu1',
      component:Menu1
    }
  ]
})


main.js里导入路由配置,以及配置路由

/*
入口js:创建Vue实例
 */
import Vue from 'vue'
import App from './App'
import router from './router'



new Vue({
  el:'#app',
  components:{
    App
  },
  template:'<App/>',
  router
})


App.vue里:

<template>
  <div>
    <div class="menu">
      <ul>
        <li>
          <!--<a href="">首页</a>-->
          <router-link to="/index">首页</router-link>
        </li>
        <li>
          <!--<a href="">菜单1</a>-->
          <router-link to="/menu1">菜单1</router-link>
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

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

<style>

  ul li{
    float:left;
    padding-left: 20px;
    list-style-type: none;
  }

  ul li a{
    text-decoration: none;
  }

  .content{
    clear: both;
    padding: 20px;
  }
</style>


router-link 里配置请求路由,通过路由配置,找到响应组件;

router-view里显示组件内容;


运行效果:

GIF.gif


不过两个问题,没有默认显示页面页面;

我们配置下路由,默认显示下首页内容;

index.js修改下:

QQ鎴浘20190727224002.jpg

{

  path:'/',

  redirect:'/index'

}


这样的话 默认首页 就会跳转到index请求;


还有一个,我们加个需求,点击的菜单,显示红色;

我们看下

QQ鎴浘20190727224442.jpg


选中的时候多了两个样式 router-link-exact-active router-link-active

我们可以给router-link-active 这个动态样式 加个color:red属性即可;


直接index.html里加:

QQ鎴浘20190727224634.jpg


这样就可以实现选中菜单颜色变红的效果了;



关键字:   vue     Router     路由  

上一篇:vue 过渡&动画

下一篇:vue Router嵌套路由

Powered by Java1234 V3.0 Copyright © 2012-2016 Java知识分享网 版权所有