Vue--靜態(tài)路由

Vue靜態(tài)路由

<div id="app">
    <router-link to="/home" tag="span">home</router-link>
    <router-link to="/index" tag="span>index</router-link>
    <router-view></router-view>
</div>

const Home ={
    template:`
    <div>Home組件</div>
    `
}
const Index ={
    template:`
    <div>Index組件</div>
    `
}

const router= new VueRouter({
    mode:'hash',
    routes:[
        {
            path:"/home",
            component:Home,
        },
        {
            path:"/index",
            component:Index,
        }
    ]
})

let vm = new Vue({
    el:"#app",
    router,
})

<html>
    <body>
        <div id="app">
            <router-link to="/home" tag="div">Home組件</router-link>
            <router-link to="/index" tag="div">Index組件</router-link>
            <router-view></router-view>
        </div>
    </body>
    <script>
        const Home={
            template:`<div>home組件</div>`
        }
        const Index={
            template:`<div>index組件</div>`
        }

        const router = new VueRouter({
            mode:"hash",
            routes:[
                {
                    path:"/home",
                    component:Home,
                },
                {
                    path:"/index",
                    component:Index,
                }
            ]
        })

        let vm = new Vue({
            el:"#app",
            router,
        })
    </script>
</html>

<html>
    <body>
        <div id="app">
            <button @click="toHome">home</button>
            <button @click="toIndex">index</button>
            <!-- 
            <button @click="$router.push("home")"></button>
            <button @click="$router.push("index")"></button>
            -->
            <router-view></router-view>
        </div>
    </body>
    <script>
        const Home={
            template:`<div>home組件</div>`
        }
        const Index={
            template:`<div>index組件</div>`
        }
        const router =new VueRouter({
            mode:"hash",
            routes:[
                {
                    name:'home',
                    path:"/home",
                    component:Home,
                },
                {
                    name:"index",
                    path:"/index",
                    component:Index,
                }
            ]
        })
        let vm = new Vue({
            el:"#app",
            router,
            methods:{
                "toHome"(){
                    // this.$router.push("/home")
                    // this.$router.push({name:"home"})
                    this.$router.push({path:"/home"})
                },
                "toIndex"(){
                    // this.$router.push("/index")
                    // this.$router.push({name:"index"})
                    this.$router.push({path:"/index"})
                }
            }
        })
    </script>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容