013 Vue 引入路由配置（vue-router）

在Vue中，我们可以通过vue-router路由管理页面之间的关系

Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成，让用Vue.js构建单页应用变得轻而易举

创建项目：vue create vue-router-demo

1、在Vue中引入路由

第一步：安装路由npm install --save vue-router

 

 

第二步：配置独立的路由文件

 

 

 新建

 

 

 

 //index.js

impor{createRouter,createWebHashHistory}from'vue-router'

import HomeView from '../views/HomeView.vue'

const routes=[

　　{

　　path:'/'

　　name:'home',

　　component:HomeView

　　},

　　{

　　path:'/about',

　　name:'about',

　　component:()=>import('../views/AbooutView.vue')

　　},

]

const routeer = createRouter({

　　history:createWebHashHistory(),

　　routes

　　})

export default router

第三步：引入路由到项目

//main.js

import router from ' ./router'

app.uer(router)

第四步：指定路由显示入口<router-view/>

第五步：指定路由跳转

<router=link to="/">Home</router-link>

<router=link to="/about">About</router-link>