vue-cli中使用路由

版权声明：企业站，小游戏制作 https://blog.csdn.net/qq947289507/article/details/81324939

1，安装路由

cnpm install --save vue-router

2，在main.js中，引入路由插件，并使用

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3，导入需要用到的页面

import Page1 from './pages/Page1.vue'
import Page2 from './pages/Page2.vue'

4，在vue中配置路由

new Vue({
    router:new VueRouter({
        routes:[
            {path:'/page1',component:Page1},
            {path:'/page2',component:Page2}
        ]
    }),
  render: h => h(App)
}).$mount('#app')

5，在需要的地方，调用路由

<p>
        <router-link to="/page1">page1</router-link>
         <router-link to="/page2">page2</router-link>
    </p>
<router-view></router-view>

6，页面中的文件很简单，例如Page1.vue：

<template>
  <div>
    <p>第1页的内容</p>
  </div>
</template>

<script>    

</script>

<style>
</style>