如何独立的模板文件使用vue和vue路由器cdn？

mspsb9vt 于 2022-11-17 发布在 Vue.js

关注(0)|答案(2)|浏览(132)

我有一个HTML文件，我使用vue和vue路由器CDN
我想将切换的页面模板部分分离到一个文件中，或者使用javascript引入HTML模板
可行吗？

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title></title>
     <!-- vue.js cdn -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <!-- vue axios call api server cdn -->
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <!-- vue routr cdn-->
     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/one">one</router-link>
    <router-link to="/two">two</router-link>
    <router-link to="/three">three</router-link>

    <router-view></router-view>
</div>
<script type="text/javascript">
    
    var one = {template:'<p>one</p>'};
    var two = {template:'<p>two</p>'};
    var three = {template:'<p>three</p>'};

    var routes = [
        { path: '/', redirect: '/one'}, 
        {path:'/one',component:one},
        {path:'/two',component:two},
        {path:'/three',component:three}
    ];

    var router = new VueRouter({
        routes: routes
    })

    new Vue({
        el: '#app',
        router
    })
</script>
</body>
</html>

vue.js

来源：https://stackoverflow.com/questions/66559733/how-to-independent-template-file-use-vue-and-vue-router-cdn

2条答案

按热度按时间

3vpjnl9f1#

您可以创建多个文件，例如：

`one.js`：

var one = {template:'<p>one</p>'};

`two.js`：

var one = {template:'<p>two</p>'};

`three.js`：

var one = {template:'<p>three</p>'};

并从index.html中删除以下行：

var one = {template:'<p>one</p>'};
var two = {template:'<p>two</p>'};
var three = {template:'<p>three</p>'};

最后导入那些在当前脚本标记之前带有脚本标记文件

<script src="one.js"></script>
<script src="two.js"></script>
<script src="three.js"></script>

将它们添加到<script type="text/javascript"></script>之前

赞(0）回复(0）举报 2022-11-17

yruzcnhs2#

one.html

<p>one component</p>

two.html

<p>two component</p>

three.html

<p>three component</p>

app.html

<router-link to="/">one</router-link> | 
<router-link to="/two">two</router-link>
<component_three/>
<router-view />

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.global.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.1.6/vue-router.global.js"></script>
    <title>test</title>
</head>
<body>
    <div id="app"/>
    <script type="text/javascript" src="index.js"> </script>
</body>
</html>

index.js

const one = async () => {
    let template = await fetch("one.html")
    template = await template.text()
    return ({
        template: template,
        setup() {/*...*/ }
    })
}

const two = async () => {
    let template = await fetch("two.html")
    template = await template.text()
    return ({
        template: template,
        setup() {/*...*/ }
    })
}

const three = async () => {
    let template = await fetch("three.html")
    template = await template.text()
    return ({
        template: template,
        setup() {/*...*/ }
    })
}

const app = async () => {
    let template = await fetch("app.html")
    template = await template.text()
    return ({
        template: template,
        components: {
            "component_three" : await three(),
        },
        setup() {/*...*/ }
    })
}

const init = async () => {
    const index = Vue.createApp(await app());       
    const routings = VueRouter.createRouter({
    history : VueRouter.createWebHashHistory(),
        routes : [
            {path:'/', component: await one()},
            {path:'/two', component: await two()}
        ]
    })
    index.use(routings)
    index.mount("#app")
}

init()

赞(0）回复(0）举报 2022-11-17

我来回答

如何独立的模板文件使用vue和vue路由器cdn？

2条答案

`one.js`：

`two.js`：

`three.js`：

相关问题

热门标签

最新问答

如何独立的模板文件使用vue和vue路由器cdn？

2条答案

one.js：

two.js：

three.js：

相关问题

热门标签

最新问答

`one.js`：

`two.js`：

`three.js`：