VueRouter-具体流程

费劲了九牛二虎之力,终于是写完了一个路由demo,但是感觉还是无法理解很多东西,在这里慢慢总结记录一下。

1,完成一些准备工作,搭建好路由index.js文件。

2,在App.vue内(用了element-ui,需要引入插件)(在我自己写的App.vue内部其实是不需要引入组件的,直接注释掉就好):

// App
<template>
  <div id="app">
    <router-link to="/About">
      <el-button type="success">About</el-button>
    </router-link>
    &nbsp;
    <router-link class="HomeStyle" to="/Home">
      <el-button type="primary">Home</el-button>
    </router-link>
   <hr>
  <div>
    <router-view></router-view>
  </div>
  </div>
</template>

<script>

// import About from './components/About.vue'
// import Home from './components/Home.vue'

export default {
  name: 'App',
  // components: {
  //   About,Home
  // }
}
</script>
View Code

在About.vue内:

<template>
  <div class="main">
      <h2>我是About</h2>
      <h2>我是二号About</h2>
  </div>
</template>

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

<style scoped>
    .main{
        font-family: 'Courier New', Courier, monospace;
        font-size:40px;
        color:darkolivegreen;
    }
</style>
View Code

在Home.vue内:

<template>
  <div class="main">
      <h2>我是Home</h2> 
  </div>
</template>

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

<style scoped>
    .main{
        font-family:Arial, Helvetica, sans-serif;
        font-size:40px;
        color:dodgerblue;
    }
</style>
View Code

最后写一下自己的思路:

引入路由插件(注意版本问题)=》

新建router文件夹,下新建index.js文件=》

内部写整个应用的路由(照猫画虎即可,主要是路径key和组件value对应的上)=》

开始写组件(想好了写其实很简单)=》

router-link和router-view要稍微注意一下=》

<router-view></router-view>中间包的就是写好的组件

posted @ 2022-02-27 20:59  沉梦昂志_doc  阅读(74)  评论(0编辑  收藏  举报