Vue-router路由使用，单页面的实现

1.安装路由系统

NPM
npm install vue-router

2.在main.js中进入引用

import VueRouter from 'vue-router'

3.创建三个空的组件：

Vcourse.vue

<template>
<div class="course">
  课程
</div>
</template>

<script>
    export default {
        name: "vcourse",
        data(){
          return {

          }
        }
    }
</script>

<style scoped>

</style>

View Code

Vmain.vue

<template>
<div class="course">
  课程
</div>
</template>

<script>
    export default {
        name: "vcourse",
        data(){
          return {

          }
        }
    }
</script>

<style scoped>

</style>

View Code

Vmarked.vue

<template>
<div class="course">
  课程
</div>
</template>

<script>
    export default {
        name: "vcourse",
        data(){
          return {

          }
        }
    }
</script>

<style scoped>

</style>

View Code

4.在main.js中引入这三个组件

//引入的三个组件
//定义路由组件。可以从其他文件 import过来
import Vmain from './components/Vmain'
import Vcourse from './components/Vcourse'
import Vmarked from './components/Vmarked'

5.使用vuerouter.use()方法

Vue.use(VueRouter);

6.定义我们的路由对象：

//定义我们的路由对象,每一个路由映射一个组件
const router = new VueRouter({
  mode:'history',
  routes:[
    {path:'/',component:Vmain},
    {path:'/course',component:Vcourse},
    {path:'/mark',component:Vmarked}

  ]
});

7.挂载

//4 创建和挂载实例
new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

8.渲染

 <div class="app">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <ul>
      <li><router-link to="/">首页</router-link></li>
    </ul>
    <ul>
      <li><router-link to="/course">课程</router-link><button class="btn-success">88888</button></li>
    </ul>
    <ul>
      <li><router-link to="/mark">编辑器</router-link></li>
    </ul>

    <!--路由出口-->
    <!--路由匹配到的组件将渲染在这里-->
    <router-view></router-view>

  </div>

这里把router-link渲染成了a标签，to渲染成了href.

这样一个单页面应用就出来了。

效果就是点击三个a标签，分别加载不同的组件，而页面不会刷新，路由在更新。

 

 那个888，是在最后测试了一下bootstrap的 button,看bootstrap导入了没有。

最后附上所有的全部代码：

app.vue

<!-- 一个组件由三部分组成 -->
<template>
  <!-- 页面的结构 -->
  <div class="app">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <ul>
      <li><router-link to="/">首页</router-link></li>
    </ul>
    <ul>
      <li><router-link to="/course">课程</router-link><button class="btn-success">88888</button></li>
    </ul>
    <ul>
      <li><router-link to="/mark">编辑器</router-link></li>
    </ul>

    <!--路由出口-->
    <!--路由匹配到的组件将渲染在这里-->
    <router-view></router-view>

  </div>
</template>

<script>
  //页面的业务逻辑
  export default {
    name: 'app',
    data() {       //data必须是一个函数
      return {    //必须return。
        msg:"hello"
      }
    },
  }
</script>


<style scoped>
  *{
    padding: 0;
    margin: 0;
  }
</style>

View Code

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

  //引入的三个组件
  //定义路由组件。可以从其他文件 import过来
  import Vmain from './components/Vmain'
  import Vcourse from './components/Vcourse'
  import Vmarked from './components/Vmarked'

Vue.use(VueRouter);


//定义我们的路由对象,每一个路由映射一个组件
const router = new VueRouter({
  mode:'history',
  routes:[
    {path:'/',component:Vmain},
    {path:'/course',component:Vcourse},
    {path:'/mark',component:Vmarked}

  ]
});

//4 创建和挂载实例
new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

View Code

三个组件代码在上面已有。其实就是三个空模板。

 

转载于:https://www.cnblogs.com/geogre123/p/9776823.html