Vue--静态路由

作者: 蒜泥捣莓 | 来源:发表于2022-10-27 16:48 被阅读0次

Vue-- 监听路由变化，数据无法更新？
vue--路由
锐捷实战系列(三十八) 静态路由
局域网中两台电脑中组态王软件传递信息
20220726-Alma Linux8添加静态路由
windows添加静态路由
CCNA-13、静态路由
Centos7添加路由
逸佳君：CCNA之静态路由实验
路由选择之静态路由

`Vue`静态路由

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