vue学习基础知识篇六--路由--选中高亮

创建一个新的项目，依然先不要装路由，自己来装，初始化项目之后，在项目根目录执行：

cnpm install vue-router --save

在项目中安装路由。然后在main.js文件中引入安装的路由才能使用，固定格式

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

这样路由的环境便搭建好了，让我们开启第一步，做一个最简单的路由吧

首先我们要新建一个router路由对象，我们采用命名路由规则，因为一般这样的比较常用，在main.js中，格式大概为：

const router=new VueRouter({
  routes:[{
    path: '/xiao',  //这里不命名，只用‘/’可直接访问，命名了访问需要加上名字参数
    name: 'Helloworld',
    component:HelloWorld//页面
  }
  ]
})

 这里导航了Helloworld页面，则需要将Helloworld页面导入进来，

import HelloWorld from './components/HelloWorld'

 完成之后需要将router对象注入vue对象，注：这一步很容易忘，一定要记住

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

这时再通过

<router-view></router-view>

在app组件中插入显示的位置

注意：重要知识->

为了防止main.js中的代码过于繁杂，我们将路由的使用独立出来，这一点很容易，在src目录下新建一个文件夹，比如router，

在该文件夹下创建js文件，比如index.js，将引入路由组件的代码转移到这里面，如：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '@/components/HelloWorld'  //@符号表示根目录

Vue.use(VueRouter)

export default new VueRouter({  //注意，为了使外界能识别路由对象，这个地方直接导出
  routes:[{
    path: '/xiao',
    name: 'Helloworld',
    component:HelloWorld
  }
  ]
})

然后在main.js文件中导入import router from './router'，同样可以实现，main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'



Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这样便实现了路由代码简化

跳转路由： 

多个路由页面的显示，在路由配置文件如上面的index.js文件中，给每个页面注册路由，在控制显示的<router-view>页面通过

<router-link to="/xiao">luyou</router-link>
//to里面的内容根据需要改变

示例，一个hellworld页面和一个learn页面，通过路由来控制显示哪一个

//路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Learn from '@/components/learn'

Vue.use(VueRouter)

export default new VueRouter({
  routes:[{
    path: '/xiao',
    name: 'Helloworld',
    component:HelloWorld
  },
  {
    path: '/lea',
    name: 'Learn',
    component:Learn
  }
  ]
})


//跳转显示路由页面代码
    <ul>
      <router-link to="/xiao">luyou</router-link>    //默认渲染为<a>标签，可加tag="li"属性渲染为li标签
      <router-link to="/lea">learn</router-link>
    </ul>
    <router-view></router-view>

 既可通过点击选择页面

<router-link>默认渲染为<a>标签，可加tag="li"属性渲染为li标签

动态路由：

在路由配置的地方通过加"/:参数"增加参数配置，然后在路由跳转的地方传入参数，在显示的页面通过"this.$route.params.参数"来接收。做一个传递参数‘12345’的示例：

//路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Learn from '@/components/learn'

Vue.use(VueRouter)

export default new VueRouter({
  routes:[{
    path: '/xiao/:id',   //增加参数id
    name: 'Helloworld',
    component:HelloWorld
  },
  {
    path: '/lea',
    name: 'Learn',
    component:Learn
  }
  ]
})

//跳转
<template>
  <div id="app">
    <img src="./assets/logo.png">
    
    <ul>
      <router-link to="/xiao/12345">luyou</router-link>   //传递参数
      <router-link to="/lea">learn</router-link>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>


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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


//显示
<template>
  <div class="hello">
    小伍的路由来喽，^_^---
    {{this.$route.params.id}}     //接收参数
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
     
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

补充内容（一周后补充）： 

路由和小程序里的tab相同，我们需要在路由被选中后颜色会有变化，这样才能方便看出选中的页面是哪一个（这里不得不说一下，腾讯就是牛皮，小程序里面的好多内容都比vue实用，虽然是仿照vue写的，但我个人觉着小程序更能使开发变得容易），这里我们打开浏览器开发者工具，找到路由跳转标签<router-link>，会发现里面有默认的class，里面有名为“router-link-active”的样式，我们在全局app.vue里面描绘该样式，就可以实现选中变色

.router-link-active{
  color: red
}

 这里呢，vue提供了api使其变得简单，在路由配置哪里，实用对象

 linkActiveClass:'active',

这样 router-link-active就会被active代替，就可以简写成active，同时好有一个默认样式“router-link-exact-active”，这个为精准样式，意思就是前一个样式选中后父级也会被选中，而这个精准样式只会选中一个，父级不会被选中。

写一个不精准的示例

//路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Learn from '@/components/learn'
import Base from '@/components/base'
import Notfind from '@/components/notfind'

Vue.use(VueRouter)

export default new VueRouter({
  linkActiveClass:'active',
  routes:[
    {
      path:'*',
      component:Notfind
    },
    {
      path:'/',
      redirect:'/lea'
    },
    {
    path: '/xiao/:id',
    name: 'Helloworld',
    component:HelloWorld
    
  },
  {
    path: '/lea',
    name: 'Learn',
    component:Learn,
    children:[
      {
        path:'bases',
        component:Base
      }
    ]
  }
  ]
})

//全局样式
<template>
  <div id="app">
    <img src="./assets/logo.png">
    
    <ul>
      <router-link :to="{name:'Helloworld',params:{id:id}}">luyou</router-link>
      <router-link to="/lea">learn</router-link>
    </ul>
    <button type="button" @click="tiao">learn</button>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
    
  },
  data(){
    return{
      id:'具名路由真好'
    }
  },
  methods:{
    tiao(){
      this.$router.push('/lea');
    }
  }
}
</script>

<style>

.active{
  color: red
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>