Vue简单路由的使用

安装    npm install vue-router --save

项目结构

router.js

 import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About'
import Home from '../views/Home'

Vue.use(VueRouter);
export default new VueRouter({
 linkActiveClass:'active',//路由跳转时动态添加样式

  routes:[
    {
      path:'/',
      name:'主页面',
      redirect:'/about'
    },
    {
      path:'/about',
      name:'关于',
      component:About
    },
    {
      path:'/home',
      name:'主页',
      component:Home
    },

  ]

})

main.js

//入口js，创建vue实例
import Vue from 'vue'

import App from './App.vue'
import myrouter from './router/router'/*引入自定路由*/



new Vue({
  el:'#app',
  components:{
    App,

  },
  template:'<App/>',
  router:myrouter,/*此处是router*/
})

app.vue

<router-link to="/about">表示路由连接
 <router-view></router-view>被显示的路由组件

 <template>

  <div class="container">
    <div class="row">
      <div class="col-sm-3">



           <router-link to="/about" class="list-group-item">关于</router-link>
          <router-link to="/home"  class="list-group-item">主页</router-link>




      </div>
      <div class="col-sm-9">

        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>

export default {

  name:'App',
  methods:{

  }

}
</script>
<style>


</style>

其他组件home和about

<template>
    <div>about</div>
</template>

<script>
    export default {
        name: "About"
    }
</script>

<style scoped>

</style>

<template>
    <div>about</div>
</template>

<script>
    export default {
        name: "About"
    }
</script>

<style scoped>

</style>