vue 之 vue-router

官方文档

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：

// Home.vue
export default {
  computed: {
    username () {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

1：先下载路由
npm install vue-router --save
2：导入
import VueRouter from "vue-router"
//  定义（路由）组件。

3:
 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
Vue.use(VueRouter)

1定制路由(组件)
// 导入路由组件
import Index from './Index'
import Luffy from './Luffy'


 // 2、创建 router 实例，然后传 `routes` 配置

 const router = new VueRouter({
     mode: 'history',
     routes:[
          { path: '/', component: Index },
           { path: '/luffy', component: Luffy }
     ]
 })

3
new Vue({
  el: '#app',
  router,   //  挂载router实例
  render: h => h(App)
})

4，在主主件写出口
    <!-- 路由出口 所有路由匹配的组件都会被渲染到这里 -->
    <router-view></router-view> 

5：a标签要换成router-link
       <router-link  v-for='(item,index) in urls'  :to="item.href"  :class='{active:currentIndex==index}' @click.native='clickHandler(index)' >{{item.name}}</router-link>

        <!--  给router-link添加事件 会阻止click事件的触发，需要加上.navtive就可以了。加上.navtive 才是真正点击了a标签的click事件，在组件中不加.native 不会触发原生的事件。注意了注意了 -->
        <!-- <router-link to="/luffy">路飞学城</router-link> -->
      

主主件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>

        <router-link  v-for='(item,index) in urls'  :to="item.href"  :class='{active:currentIndex==index}' @click.native='clickHandler(index)' >{{item.name}}</router-link>

        <!--  给router-link添加事件 会阻止click事件的触发，需要加上.navtive就可以了。加上.navtive 才是真正点击了a标签的click事件，在组件中不加.native 不会触发原生的事件。注意了注意了 -->
        <!-- <router-link to="/luffy">路飞学城</router-link> -->
      
    </ul>

    <!-- 路由出口 所有路由匹配的组件都会被渲染到这里 -->
    <router-view></router-view> 
   
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      urls:[
        {href:'/',name:"首页"},
        {href:'/luffy',name:"路飞学城"}

      ],
      currentIndex:0
    }
  },
  methods:{
    clickHandler(index){
      console.log(index)
      this.currentIndex = index;

    }
  }
}
</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;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
a.active{
  color: yellow;
}
</style>

子主件

<template>
    <div class="luffy">
        <h4>我是路飞</h4>
    </div>
</template>
<script>
    export default{
        name:'luffy',
        data(){
            return {

            }
        }
    }
</script>
<style>
    
</style>

<template>
    <div class="index">
        <h3>我是首页</h3>
    </div>
</template>
<script>
    export default{
        name:'index',
        data(){
            return {

            }
        }
    }
</script>
<style>
    
</style>