Vue-Router2.0教程

来源：互联网发布：系统端口设置在哪里编辑：程序博客网时间：2024/05/17 09:19

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

布局
<router-link to="/home">主页</router-link>
<router-view></router-view>
路由具体写法
//组件
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'
```
});
重定向
之前 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>

阅读全文

0 0