vue路由引入步骤：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.base{
width:320px;
height:300px;
background:#ddd;
border:3px solid #1b6d85;
padding:12px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<!--2:显示不同组件信息-->
<router-view></router-view>
</div>
<script src="js/vue.min.js"></script>
<!--1:引入路由插件-->
<script src="js/vue-router.js"></script>
<script>
//3:组件多个组件
var testLogin = Vue.component("login",{
template:`
<div class="base">
<h1>这是登录页面</h1>
</div>
`
});
var testRegister = Vue.component("regiter",{
template:`
<div class="base">
<h1>这是注册页面</h1>
</div>
`
});
//4:配置路由词典
//语法： 请求路径 对应组件
//{path:"/login",component:testLogin}
//当path为空:相当于指定页面打开时，默认加载组件
const myRoutes = [
{path:"",component:testLogin},
{path:"/login",component:testLogin},
{path:"/reg",component:testRegister}
];
//5:创建由路对象
const myRouter = new VueRouter({
routes:myRoutes
});
//6:创建Vue对象,并且指定路由对象
new Vue({
router:myRouter,
el:"#app"
});
</script>
</body>
</html>
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
