首页 > 代码库 > vue router路由（三）

vue router路由（三）

2024-10-10 21:47:39   217人阅读

当环境搭建及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路由（三）


联系
我们