vue router路由

Posted 2020-09-24 SeaJson

当环境搭建及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>

 

接下来，传参使用