CODEWITHSUNDEEP
javascriptvue.js
rubie
rubie

Reputation: 67

How to Independent template file use vue and vue router cdn?

I have an HTML file, and I use vue and vue router CDN

I want to separate the part of the switched page template into a file or use javascript to introduce the HTML template

Is it feasible?

<!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>

Upvotes: 0

Views: 1600

Answers (2)

julven condor
julven condor

Reputation: 51

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()

Upvotes: 1

Mohammad Masoudi
Mohammad Masoudi

Reputation: 446

you can create multiple files for example:

one.js :

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

two.js :

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

three.js :

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

and remove this lines from your index.html :

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

and finally import those files with script tag before your current script tag

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

add them before <script type="text/javascript"></script>

Upvotes: 1

Related Questions