<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/about">About</router-link></li>
</ul>
<router-view></router-view>
</div>
<script src="../js/vue.js"></script>
<script>
let Home = {
template:'<h1>This is Home!</h1>'
};
let About = {
template: '<h1>This is About!</h1>'
};
let routes = [
{
path:'/',
component:Home,
},
{
path:'/about',
component: About
}
];
let RouterLink = {
props:['to'],
template:'<a :href="to"><slot name="default"></slot></a>'
};
let RouterView = {
data(){
return{
url:window.location.pathname
}
},
computed:{
ViewComponent() {
return routes.find(route => route.path === this.url).component;
}
},
render(h){
return h(this.ViewComponent)
}
};
let vm = new Vue({
el:'#app',
components:{
RouterLink,
RouterView,
}
})
</script>
</body>
</html>
vue-其他index.html
原创
©著作权归作者所有:来自51CTO博客作者虾米大王的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:vue-入门实例9-4.html
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
vue-其他index(javascript).html
【代码】vue-其他index(javascript).html。
javascript html 前端 -
vue-其他vue-router.html
【代码】vue-其他vue-router.html。
vue.js javascript 前端 html Vue -
vue-其他render函数.html
【代码】vue-其他render函数.html。
javascript vue.js 前端 html Vue -
vue-其他axios.html
【代码】vue-其他axios.html。
javascript 前端 java ios html -
vue-其他neilianyangshi.html
【代码】vue-其他neilianyangshi.html。
vue.js javascript 前端 html Vue -
vue-其他列表过渡.html
【代码】vue-其他列表过渡.html。
vue.js javascript 前端 html ci -
vue-其他计算属性.html
【代码】vue-其他计算属性.html。
vue.js javascript 前端 html Vue -
vue-其他命名视图.html
【代码】vue-其他命名视图.html。
javascript vue.js 前端 ide Vue -
vue-其他watch监听.html
【代码】vue-其他watch监听.html。
vue.js javascript 前端 html Vue -
vue-其他组件切换.html
【代码】vue-其他组件切换.html。
javascript vue.js 前端 Vue html -
vue-其他vue-router-params.html
【代码】vue-其他vue-router-params.html。
vue.js javascript 前端 Vue html -
vue-其他vue-router3.html
【代码】vue-其他vue-router3.html。
vue.js javascript 前端 Vue html -
vue-其他vue-router4.html
【代码】vue-其他vue-router4.html。
vue.js javascript 前端 Vue html -
vue-其他vue-router2.html
【代码】vue-其他vue-router2.html。
vue.js javascript 前端 html Vue