vue2.0——路由

来源：互联网发布：义乌淘宝培训多少钱编辑：程序博客网时间：2024/06/06 04:28

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>路由</title>    <script src="../js/Vue.js"></script>    <script src="../js/vue-router.min.js"></script></head><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:'<h2>主页详情页</h2>'        };        var News = {            template:'<h2>新闻页详情页</h2>'        };        //配置路由        const routes = [            {path:'/home',component:Home},            {path:'/news',component:News},            //重定向            {path:'/',redirect:'/home'},        ];        //生成路由实例        const router = new VueRouter({            routes        });        //加载实现        new Vue({            router,            el:'#box'        });    </script></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>路由</title>    <script src="../js/Vue.js"></script>    <script src="../js/vue-router.min.js"></script></head><body>    <div id="box">        <div>            <router-link to="/home">这是主页</router-link>            <router-link to="/news">这是新闻页</router-link>            <router-link to="/user">这是用户页</router-link>        </div>        <div>            <router-view></router-view>        </div>    </div>    <script>        //定义组件        var Home = {            template:'<h2>主页详情页</h2>'        };        var News = {            template:'<h2>新闻页详情页</h2>'        };        var user = {            template:'<h2>用户页详情页</h2>'        };        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:'/news',component:News},            {path:'/user',component:User},            {                path:'/user',                component:User,                children:[                    {path:'username', component:UserDetail}                ]            },            //重定向            {path:'*',redirect:'/home'},        ];        //生成路由实例        const router = new VueRouter({            routes        });        //加载实现        new Vue({            router,            el:'#box'        });    </script></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>路由</title>    <script src="../js/Vue.js"></script>    <script src="../js/vue-router.min.js"></script></head><body>    <div id="box">        <div>            <router-link to="/home">这是主页</router-link>            <router-link to="/news">这是新闻页</router-link>            <router-link to="/user">这是用户页</router-link>        </div>        <div>            <router-view></router-view>        </div>    </div>    <script>        //定义组件        var Home = {            template:'<h2>主页详情页</h2>'        };        var News = {            template:'<h2>新闻页详情页</h2>'        };        var user = {            template:'<h2>用户页详情页</h2>'        };        var User = {            template:`                <div>                    <h3>这是用户信息</h3>                    <ul>                        <li>                            <router-link to="/user/jack/age/10">jack</router-link>                            <router-link to="/user/jony/age/15">jony</router-link>                            <router-link to="/user/jeey/age/18">jeey</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:'/news',component:News},            {path:'/user',component:User},            {                path:'/user',                component:User,                children:[                    {path:':username/age/:age', component:UserDetail}                ]            },            //重定向            {path:'*',redirect:'/home'},        ];        //生成路由实例        const router = new VueRouter({            routes        });        //加载实现        new Vue({            router,            el:'#box'        });    </script></body></html>

0 0