vue 基本路由

一、使用的方法和组件：

1、import routerfrom './routes' 导入路由所在包

2、import Aboutfrom '../views/About.vue' 导入vue文件

3、routes: []配置路由

4、{path:'/home',component: Home}, 配置跳转路径

5、{path:'/', redirect:'/about'} 默认跳转路径

6、About 跳转 to里面是跳转路径在  index.js 文件里面配置

二、实例代码

项目结构图

index.js

/**

路由器模块

**/

import Vuefrom 'vue'

import VueRouterfrom 'vue-router'

import Aboutfrom '../views/About.vue'

import Homefrom '../views/Home.vue'

Vue.use(VueRouter)

export default new VueRouter({

// 配置N个路由

  routes: [

{

path:'/about',

      component: About

},

    {

path:'/home',

      component: Home

},

    {

path:'/',

      redirect:'/about'

    }

]

})

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 Vuefrom 'vue'

import Appfrom './App.vue'

import VueResourcefrom 'vue-resource'

import {Button}from 'mint-ui'

import routerfrom './routes'

// 注册全局组件

// 使用插件(Button.name) 有其他组件

Vue.component(Button.name, Button)

Vue.config.productionTip =false

Vue.use(VueResource)// 内部会给vm对象和组件对象添加一个属性$htpp

/* eslint-disable no-new */

new Vue({// 配置对象的属性名都是一些确定的名称，不能修改

  el:'#app',

  components: {App},

  template:'',

  router

})

App.vue

   

     

       

Router Test

   

     

       

         

          About

          Home

     

       

         

           

           

             

  export default {}

Home.vue

   

Home

     

       

• News

         

• Message

    export default {}

  About.vue

     

  About

     

  {{msg}}

     

    export default {

  props: {

  msg:String

      }

  }

  三、demo实现效果

  3.1、默认about

  
  

  .
  3.2、跳转到home