首页 > 代码库 > vue router路由(三)

vue router路由(三)

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

技术分享

build目录是打包配置文件 (不建议动)

config是vue项目基本配置文件

dist是构建后文件

js 手动创建 (根据需要)

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

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

app.vue  父组件

main.js 入口文件

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

index.html 主页

 

1、首先安装路由通过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>

 

接下来,传参使用

 

vue router路由(三)