vue.js - Vue的路由设置如何像angular那样路由不同html文件里的内容？

问题描述

问 题

我用的是直接<script>方式引用的vue，vue-router也引用进来了。
但是路由就遇到疑惑了，能不能像angular的ui-router和ngRoute那样，可以路由不同html里的内容呢？

//这样写无效
const Home = {
    template :'home.html'
};
//同样无效
const Home = {
    templateUrl :'home.html'
};

//这样能生效。难道都不能将路由的html区分到单独的文件中？
const Home = {
    template :'<div>路由模块</div>'
};

const routes = [
    {path:'/home',component :Home},
];

const router = new VueRouter({
    routes: routes
});

var vm=new Vue({
    router :router,
    el:'#app',
    data: {
        message:'Hello World!'
    }
});

解决方案

component可以是一个template，引用进来就可以比如这样：

import Home from 'Home.vue'

const routes = [

{path:'/home',component :Home},

];

这篇关于vue.js - Vue的路由设置如何像angular那样路由不同html文件里的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！