Vue路由的使用简单实例
作者：互联网
一、导入vue.js和vue.router.js，一定要先导入vue.js
二、代码
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<router-link to="/menu1">第一句</router-link>
<router-link to="/menu2">第二句</router-link>
<router-link to="/menu3">第三句</router-link>
<router-link to="/menu4">第四句</router-link>
<!-- 路由出口 -->
<router-view></router-view>
</div>
<template id="menu1">
<h1>床前明月光</h1>
</template>
<template id="menu2">
<h1>疑是地上霜</h1>
</template>
<template id="menu3">
<h1>举头望明月</h1>
</template>
<template id="menu4">
<h1>低头思故乡</h1>
</template>
</body>
<script type="text/javascript">
//1、定义路由组件
const menu1={template:"#menu1"};
const menu2={template:"#menu2"};
const menu3={template:"#menu3"};
const menu4={template:"#menu4"};
//2、定义路由
const routers=[
{path:"/menu1",component:menu1},
{path:"/menu2",component:menu2},
{path:"/menu3",component:menu3},
{path:"/menu4",component:menu4}
];
//3、创建router然后使用routers的配置
const router=new VueRouter({
routes:routers
})
//4、创建和挂载根实例
var vue=new Vue({
router
}).$mount("#app");
</script>
标签：Vue,const,vue,component,menu2,实例,template,path,路由 来源： https://www.cnblogs.com/dilireba/p/13126639.html