Vue之Router

Vue之Router

单页面应用，必须要会vue里的插件

vue的官网上有个生态系统--核心插件：   Vue Router   和      Vuex

安装

官网安装提供了多种安装方法，我们使用npm install vue-router --save ，它是项目依赖所以要--save

使用

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能

mian.js

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

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
import Vmain from './components/Vmain.vue'
import Vcourse from './components/Vcourse.vue'
import Vmarked from './components/Vmarked.vue'
Vue.use(VueRouter)


// 2. 定义路由对象，每一个路由应该映射一个组件，还可以传其它配置参数
const router = new VueRouter({
    mode: 'history', //去掉uri的#号，详情看官网
    routes:[
    { path: '/', component: Vmain },
    { path: '/course', component: Vcourse },
    { path: '/mark', component: Vmarked }
    ]
})


new Vue({
  el: '#app',
  // 3. 创建和挂载根实例。
  // 记得要通过 router 配置参数注入路由，
  // 从而让整个应用都有路由功能
  router, // 优雅的写法，(缩写) 相当于 routes: routes
  render: h => h(App)
})

App.vue

<template>
    <div id="app">
      <p>
        <!-- 4 -->
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/">首页</router-link>
        <router-link to="/course">课程</router-link>
        <router-link to="/mark">Markdown</router-link>
      </p>
      <!-- 5 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
</template>
<script>

    export default {
        name:'App',     
        data(){             
            return {

            }
        },
    }

</script>
<style>

</style>

Vmain.vue  

<template>
    <div class="main">
        首页
    </div>
</template>
<script>

    export default {
        name:'Vmain',     
        data(){             
            return {

            }
        },
    }
    
</script>
<style>

</style>

Vcourse.vue

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

    export default {
        name:'Vcourse',     
        data(){             
            return {

            }
        },
    }
    
</script>
<style>

</style>

Vmarked

<template>
    <div class="marked">
        编辑器
    </div>
</template>
<script>

    export default {
        name:'Vmarked',     
        data(){             
            return {

            }
        },
    }
    
</script>
<style>

</style>