npm i vue-router -S
Vue.use(VueRouter);
var router = new VueRouter();
router.addRoutes([路由对象]);
{path:‘锚点值‘,component:要(填坑)显示的组件}
<router-view></router-view>
<!DOCTYPE html>
<html>
<head>
<title>路由的安装和使用</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="vue.js"></script>
<!-- 引入路由插件 -->
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
var Login={
template:`
<div>我是登录页面</div>
`,
}
//安装路由插件
Vue.use(VueRouter);
//创建路由对象
var router= new VueRouter({
//配置路由对象
routes:[
{path:‘/login‘,name:‘login‘,component:Login}
]
})
new Vue({
el:‘#app‘,
router,
template:`
<div>
<p>请在链接上加上login测试路由功能</p>
<router-view></router-view>
</div>
`,
data(){
return {}
},
})
</script>
</body>
</html>
原文:https://www.cnblogs.com/xl4ng/p/12584443.html