vue2.0学习---vue-router

做一个单页应用（spa：所有东西在一个页面上显示），路由（不同的url地址）是必不可少的，下面介绍一下，vue-router在工程化下的使用，仅仅旨在说明3个页面（vue中称为组件）之间的跳转。

1.建立一个名为 epproject 的项目

如果不会vue-cli 脚手架创建一个vue的项目，自己百度，或者看我之前写的 vue学习---vuex简介中介绍到了。需要在node.js的环境下，建立项目前自行安装node.js

在安装时，提示安装内容时，只要选择安装router即可，其他不用安装。

2.建立的项目为

vue2.0学习---vue-router

store.js是我自己建立的集中状态管理文件，这里没用到，不用管。

3.在 componts文件夹下，新建两个组件，现在为空即可

vue2.0学习---vue-router

4.打开router 文件夹下的index.js 开始配置路由

代码如下：

//引入vue 和 vue-router
import Vue from 'vue'
import Router from 'vue-router'

//引入组件，这里代表不同的页面
import Creat from '@/components/Creat'
import  CreatFinsh from '@/components/CreatFinsh'

// 使用路由
Vue.use(Router)

// 将实例化的路由实例 作为模块导出 
export default new Router({
  // 这里必须这样写routes
  routes: [
    {
      //要跳转的地址
      path: '/Creat', 
      //相对应的跳转的页面为
      component: Creat
    },
    {
      path: '/CreatFinsh',
      component: CreatFinsh
    }
  ]
})

// 最后路由要挂载到一个地方 ，这里是挂载到 index.html ID=“app”的节点下
//第五步会介绍

5.打开main.js文件

引入路由配置文件，挂载路由

import Vue from 'vue'
import App from './App'

//引入路由配置文件
import router from './router'

// import store from './store'

new Vue({
  //挂载
  router, 
  el: '#app', 
  // store,        
  render:xx=>xx(App) //直接绑定一个节点进行渲染一个组件，将App.vue这个组件直接渲染进index.html下id="app"的节点下
})

6. 在App.vue中，代码如下

<template>
  <div id="app" >
    <!-- 跳转到的地址 -->
      <router-link to='/Creat'>Creat</router-link>
   <!--  路由显示的容器 -->
      <router-view></router-view>
  </div>
</template>

<script>
 
</script>

<style scoped>
  #app{
     width: 100%;
     min-height: 600px;
     background-color:#abcdef;
     /* position: relative;
     */
  } 
</style>

7.在Creat.vue 中

<template>
   <div id="app">
       <router-link to='/CreatFinsh'>转到CreatSelect路由部分</router-link>
        mfnespnfp
   </div>
</template>

<script>
export default {
  
}
</script>

<style scoped>
  #app{
      width: 100%;
      height: 700px;    
      background: #928fc5;
      position:absolute;
      top: 0;
      left: 0;
  }
</style>

8.在CreatFinsh.vue文件中

<template>
   <div id="app">我是创建完成</div>
</template>

<script>
export default {
 
}
</script>


<style scoped>
  #app{
      width: 100%;
      height: 700px;    
      background: #fff;
      position:absolute;
      top: 0;
      left: 0;
      /* z-index: 2; */
  }
</style>

9. 运行项目

npm run dev

在chrome浏览器下 iPhone6模式下查看为：

vue2.0学习---vue-router

CreatFinsh

vue2.0学习---vue-router

相关推荐