經過vue-router實現組件間的跳轉

時間 2019-12-06

標籤經過 vue router 實現組件简体版

原文原文鏈接

3、經過VueRouter來實現組件之間的跳轉
提供了3種方式實現跳轉：
①直接修改地址欄中的路由地址html

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <script src="js/vue.js"></script>
<!-- 引入文件 -->
    <script src="js/vue-router.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
<!--經過router-view指定盛放組件的容器  -->
        <router-view></router-view>
    </div>
    <script>
        var testLogin = Vue.component("login",{
            template:`
                <div>
                    <h1>這是個人登陸頁面</h1>
                </div>
            `
        })
        var testRegister = Vue.component("register",{
            template:`
                <div>
                    <h1>這是個人註冊頁面</h1>
                </div>
            `
        })
        //配置路由詞典
        //對象數組
        const    myRoutes =[
        //當路由地址：地址欄中的那個路徑是myLogin訪問組件
        //組件是做爲標籤來用的因此不能直接在component後面使用
        //要用返回值
            //path:''指定地址欄爲空：默認爲Login頁面
            {path:'',component:testLogin},
            {path:'/myLogin',component:testLogin},
            {path:'/myRegister',component:testRegister}
        ]

        const myRouter = new VueRouter({
            //myRoutes能夠直接用上面的數組替換
            routes:myRoutes
        })
        new Vue({
            router:myRouter,
            //或者：
            /*
                router:new VueRouter({
                        routes:[
                            {path:'/myLogin',component:testLogin},
            {path:'/myRegister',component:testRegister}
                        ]
                })
            */
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

②經過router-link實現跳轉
<router-link to="/myRegister">註冊</router-link>vue

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <script src="js/vue.js"></script>
<!-- 引入文件 -->
    <script src="js/vue-router.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
<!--經過router-view指定盛放組件的容器  -->
        <router-view></router-view>

    </div>
    <script>
        var testLogin = Vue.component("login",{
            template:`
                <div>
                    <h1>這是個人登陸頁面</h1>
                    <router-link to="/myRegister">註冊</router-link>
                </div>
            `
            /*to後面是路由地址*/
        })
        var testRegister = Vue.component("register",{
            template:`
                <div>
                    <h1>這是個人註冊頁面</h1>
                </div>
            `
        })
        //配置路由詞典
        const    myRoutes =[
            {path:'',component:testLogin},
            {path:'/myLogin',component:testLogin},
            {path:'/myRegister',component:testRegister}
        ]

        const myRouter = new VueRouter({
            routes:myRoutes
        })
        new Vue({
            router:myRouter,
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

③經過js的編程的方式
jumpToLogin: function () {
this.$router.push('/myLogin');
}vue-router

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <script src="js/vue.js"></script>
<!-- 引入文件 -->
    <script src="js/vue-router.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
<!--經過router-view指定盛放組件的容器  -->
        <router-view></router-view>

    </div>
    <script>
        var testLogin = Vue.component("login",{
            template:`
                <div>
                    <h1>這是個人登陸頁面</h1>
                    <router-link to="/myRegister">註冊</router-link>
                </div>
            `
            /*to後面是路由地址*/
        })
        var testRegister = Vue.component("register",{
            methods:{
                jumpToLogin:function(){
                    this.$router.push('/myLogin');
                }
            },
            template:`
                <div>
                    <h1>這是個人註冊頁面</h1>
                    <button @click="jumpToLogin">註冊完成,去登陸</button>
                </div>
            `
        })
        //配置路由詞典
        const    myRoutes =[
            {path:'',component:testLogin},
            {path:'/myLogin',component:testLogin},
            {path:'/myRegister',component:testRegister}
        ]

        const myRouter = new VueRouter({
            routes:myRoutes
        })
        new Vue({
            router:myRouter,
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。