vue router路由（三）

当环境搭建及Vue语法与指令都有所了解，该说下router。

build目录是打包配置文件 （不建议动）

config是vue项目基本配置文件

dist是构建后文件

js 手动建立 （根据须要）

node_modules 根据package.json 安装依赖模块

src资源文件，基本文件都会放在这里

app.vue  父组件

main.js 入口文件

static构建好的文件会在这个目录

index.html 主页

 

一、首先安装路由经过npm:

npm install vue-router

在main.js文件中，引入路由(router)   './router'找到当前目录router

main.js

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,
  template: '<App/>',
  components: { App },
  data:{
    urlPath : rootPath.pathUrl()
  },
  mounted: function(){
    //alert(JSON.stringify(this.urlPath))
  }
})

 

router/index.js  能够对vue-router引入，路由控制跳转都会在这里处理

import Vue from 'vue'
import Router from 'vue-router'
//import VueResource from 'vue-resource'
//import Hello from '@/components/Hello'

Vue.use(Router)
//Vue.use(VueResource)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'A',
      component: require('../components/A')
    },

   {
      path: '/', name: 'B', component: require('../components/B') }

] })

 

组件 components/A.vue  结构以下

<template>
   <div id='demo'>  这里仅有一个外层标签
        
   </div>
   <script>
       export default{
         data: function(){
          return{....}
         }
       }
   </script>
   <style>
       .....
   </style>  

</template>

 

组件A

<template>
  <div>  <!---只容许有一个最外层标签 ！-->
    <div>
      <p>{{message}}</p>
      <p><router-link :to="{ path: '/B'}">跳转B组件</router-link></p>
    </div>
  </div>
</template>
<script>
  export default {
    data: function () {
      return {
        message: 'vue好帅！'
      }
    }
  }
</script>

点击调整B组件

经过<router-link>

 

 

 单页面经过路由与组件来完成。

 

注意下，app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

 

接下来，传参使用