提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue-Router2.0教程

Vue教程
2023-09-27 14:29:06 时间

vue2.0 路由:
http://router.vuejs.org/zh-cn/index.html
基本使用:

  1. 布局
    <router-link to="/home">主页</router-link>

    <router-view></router-view>

  2. 路由具体写法
    //组件
    var Home={

     template:'<h3>我是主页</h3>'

    };
    var News={

     template:'<h3>我是新闻</h3>'

    };

    //配置路由
    const routes=[

     {path:'/home', componet:Home},
 {path:'/news', componet:News},

    ];

    //生成路由实例
    const router=new VueRouter({

     routes

    });

    //最后挂到vue上
    new Vue({

     router,
 el:'#box'

    });

  3. 重定向
    之前 router.rediect 废弃了
    {path:'*', redirect:'/home'}

路由嵌套:
/user/username

const routes=[
    {path:'/home', component:Home},
    {
        path:'/user',
        component:User,
        children:[  //核心
            {path:'username', component:UserDetail}
        ]
    },
    {path:'*', redirect:'/home'}  //404
];

/user/strive/age/10 :id:username:age

路由实例方法:
router.push({path:'home'}); //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个

router.replace({path:'news'}) //替换路由，不会往历史记录里面添加
<body>
    <div id="box">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <script>
        //组件
        var Home={
            template:'<h3>我是主页</h3>'
        };
        var News={
            template:'<h3>我是新闻</h3>'
        };

        //配置路由
        const routes=[
            {path:'/home', component:Home},
            {path:'/news', component:News},
            {path:'*', redirect:'/home'}
        ];

        //生成路由实例
        const router=new VueRouter({
            routes
        });


        //最后挂到vue上
        new Vue({
            router,
            el:'#box'
        });
    </script>
</body>
<body>
    <div id="box">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <script>
        //组件
        var Home={
            template:'<h3>我是主页</h3>'
        };
        var News={
            template:'<h3>我是新闻</h3>'
        };

        //配置路由
        const routes=[
            {path:'/home', component:Home},
            {path:'/news', component:News},
            {path:'*', redirect:'/home'}
        ];

        //生成路由实例
        const router=new VueRouter({
            routes
        });


        //最后挂到vue上
        new Vue({
            router,
            el:'#box'
        });
    </script>
</body>
<body>
    <div id="box">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <script>
        //组件
        var Home={
            template:'<h3>我是主页</h3>'
        };
        var User={
            template:`
                <div>
                    <h3>我是用户信息</h3>
                    <ul>
                        <li><router-link to="/user/username">某个用户</router-link></li>
                    </ul>
                    <div>
                        <router-view></router-view>
                    </div>
                </div>
            `
        };
        var UserDetail={
            template:'<div>我是XX用户</div>'
        };

        //配置路由
        const routes=[
            {
                path:'/home', 
                component:Home
            },
            {
                path:'/user',
                component:User,
                children:[
                    {
                        path:'username', 
                        component:UserDetail
                    }
                ]
            },
            {path:'*', redirect:'/home'}  //404
        ];

        //生成路由实例
        const router=new VueRouter({
            routes
        });


        //最后挂到vue上
        new Vue({
            router,
            el:'#box'
        });
    </script>
</body>
<body>
    <div id="box">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <script>
        //组件
        var Home={
            template:'<h3>我是主页</h3>'
        };
        var User={
            template:`
                <div>
                    <h3>我是用户信息</h3>
                    <ul>
                        <li><router-link to="/user/strive/age/10">Strive</router-link></li>
                        <li><router-link to="/user/blue/age/80">Blue</router-link></li>
                        <li><router-link to="/user/eric/age/70">Eric</router-link></li>
                    </ul>
                    <div>
                        <router-view></router-view>
                    </div>
                </div>
            `
        };
        var UserDetail={
            template:'<div>{{$route.params}}</div>'
        };

        //配置路由
        const routes=[
            {path:'/home', component:Home},
            {
                path:'/user',
                component:User,
                children:[
                    {path:':username/age/:age', component:UserDetail}
                ]
            },
            {path:'*', redirect:'/home'}  //404
        ];

        //生成路由实例
        const router=new VueRouter({
            routes
        });


        //最后挂到vue上
        new Vue({
            router,
            el:'#box'
        });
    </script>
</body>
<body>
    <div id="box">
        <input type="button" value="添加一个路由" @click="push">
        <input type="button" value="替换一个路由" @click="replace">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <script>
        //组件
        var Home={
            template:'<h3>我是主页</h3>'
        };
        var User={
            template:`
                <div>
                    <h3>我是用户信息</h3>
                    <ul>
                        <li><router-link to="/user/strive/age/10">Strive</router-link></li>
                        <li><router-link to="/user/blue/age/80">Blue</router-link></li>
                        <li><router-link to="/user/eric/age/70">Eric</router-link></li>
                    </ul>
                    <div>
                        <router-view></router-view>
                    </div>
                </div>
            `
        };
        var UserDetail={
            template:'<div>{{$route.params}}</div>'
        };

        //配置路由
        const routes=[
            {path:'/home', component:Home},
            {
                path:'/user',
                component:User,
                children:[
                    {path:':username/age/:age', component:UserDetail}
                ]
            },
            {path:'*', redirect:'/home'}  //404
        ];

        //生成路由实例
        const router=new VueRouter({
            routes
        });


        //最后挂到vue上
        new Vue({
            router,
            methods:{
                push(){
                    router.push({path:'home'});
                },
                replace(){
                    router.replace({path:'user'});
                }
            }
        }).$mount('#box');
    </script>
</body>

相关文章