Vue中使用vue-router 路由

vue-router 路由

• 当前项目下 npm install vue-router --save-dev
  • npm install vue-router 安装路由
  • –save-dev 保存在dev的配置中

使用方法

项目目录结构

1.定义组件

自定义组件Content.vue和Main.vue

Content.vue

<template>
   <h1>内容页</h1>
</template>

<script>
    export default {   //导出 让外部能够使用import导入
        name: "Content" 
    }
</script>

<style scoped>

</style>

Main.vue

<template>
    <h1>首页</h1>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

2.配置