Vue路由详解-优快云博客

本文链接：https://blog.youkuaiyun.com/xxhdcblogzh888/article/details/76941448

简单路由

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="../lib/vue.min.js" type="text/javascript" ></script>
        <script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <title>路由</title>
    </head>
    <body>
        <div id="app">
            <p>
                <router-link to='/g'>购物车</router-link>
                <router-link to='/d'>我的订单</router-link>
            </p>
            <router-view></router-view>
        </div>
        <script type="text/javascript">
        /*定义路由组件*/
        //可以从其他文件import进来
            const car ={template:'<div>购物车页面</div>'}
            const order = {template:'<div>订单页面</div>'}

            /*定义路由*/
            //每个路由应该映射一个组件
            const myroutes=[
                {path:'/g',component:car},
                {path:'/d',component:order}
            ]
            /*创建router实例，然后传'routes'配置*/
            const myr =new VueRouter({
                routes:myroutes
            })
            /*创建和挂载根实例*/
            const app =new Vue({
                router:myr
            }).$mount('#app')

                /*创建根实例对象*/
//          const app =new Vue({
//              /*创建路由对象*/
//              router:new VueRouter({
//                  /*指定路由*/
//                  routes:[
//                      {path:'/g',component:{template:'<div>购物车页面</div>'}},
//                      {path:'/d',component:{template:'<div>订单页面</div>'}}  
//                  ]
//              })
//          }).$mount('#app')
        </script>
    </body>
</html>

嵌套路由

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="../lib/vue.min.js" type="text/javascript" ></script>
        <script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <title>路由</title>
    </head>
    <body>
        <div id="app">
            <p>
                <router-link to='/aa/car'>购物车</router-link>
                <router-link to='/aa/order'>我的订单</router-link>
            </p>
            <router-view></router-view>
        </div>
        <script type="text/javascript">
        /*定义路由组件*/
        //可以从其他文件import进来
            const carson ={template:'<div>购物车子页面</div>'}
            const orderson = {template:'<div>订单子页面</div>'}
            const car ={
                template:"<div v-if=\"$route.params.id=='car'\"><router-link to='/aa/car/carson'>购物车页面</router-link><router-view></router-view></div>"+
                "<div v-else-if=\"$route.params.id=='order'\"><router-link to='/aa/car/orderson'>我的订单</router-link><router-view></router-view></div>"
            }
            /*定义路由*/
            //每个路由应该映射一个组件
            const myroutes=[
                {path:'/aa/:id',component:car,children:[{path:'carson',component:carson},{path:'orderson',component:orderson}]},
            ]
            /*创建router实例，然后传'routes'配置*/
            const myr =new VueRouter({
                routes:myroutes
            })
            /*创建和挂载根实例*/
            const app =new Vue({
                router:myr
            }).$mount('#app')
        </script>
    </body>
</html>

动态路由

<!DOCTYPE html>
<html>
            <!--动态路由即是给传id值-->
    <head>
        <meta charset="UTF-8">
        <script src="../lib/vue.min.js" type="text/javascript"></script>
        <script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <title>路由</title>
    </head>

    <body>
        <div id="app">
            <p>
                <router-link to='/g'>购物车</router-link>
                <router-link to='/d/dson'>我的订单</router-link>
            </p>
            <router-view></router-view>
        </div>
        <script type="text/javascript">
        /*定义路由组件*/
            const p={
                template:"<div v-if=\"$route.params.id=='g'\"><router-link to='/g/gson'>购物车页面</router-link><router-view></router-view></div>"+"<div v-else-if=\"$route.params.id=='d'\">订单页面<router-view></router-view></div>"
            }
            const gson={
                template:"<div>123123<router-view></router-view></div>"
            }
            //定义一个路由
            const rout=[
                {path:'/:id',component:p,children:[{path:'gson',component:gson}]}
            ]

            /*创建router实例，然后传'routes'配置*/
            const myr =new VueRouter({
                routes:rout
            })
            /*创建和挂载根实例*/
            const app =new Vue({
                router:myr
            }).$mount('#app')
        </script>
    </body>

</html>

编程导航路由

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="../lib/vue.min.js" type="text/javascript" ></script>
        <script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <title>路由</title>
    </head>
    <body>
        <div id="app">
            <p>
                <button v-on:click="show(0)">购物车</button>
                <button v-on:click="show(1)">我的订单</button>
            </p>
            <router-view></router-view>
        </div>
        <script type="text/javascript">
        /*定义路由组件*/
        //可以从其他文件import进来
            const car ={template:'<div>购物车页面</div>'}
            const order = {template:'<div>订单页面</div>'}
            /*定义路由*/
            //每个路由应该映射一个组件
            const myroutes=[
                {path:'/g',component:car},
//              {path:'/d',component:order}
            ]
            /*创建router实例，然后传'routes'配置*/
            const myr =new VueRouter({
                routes:myroutes
            })
            /*创建和挂载根实例*/
            const app =new Vue({
                router:myr,
                methods:{
                    show:function(num){
                        if(num==0){
//                          myr.push('g')
                            myr.push({path:'g',query:{name:'hello'}})
                        }else{
//                          myr.push('d')
                            myr.push({path:'d',query:{name:'world'}}) //query参数是在地址拼接参数
                        }
                    }
                }
            }).$mount('#app')
            window.onload=app.show(0)
        </script>
    </body>
</html>

命名视图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="../lib/vue.min.js" type="text/javascript" ></script>
        <script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <title>路由</title>
    </head>
    <body>
        <div id="app">
            <p>
                <router-link to='/g'>购物车</router-link>
                <router-link to='/d'>我的订单</router-link>
            </p>
            <router-view></router-view>
            <router-view name="a"></router-view>
        </div>
        <script type="text/javascript">
        /*定义路由组件*/
        //可以从其他文件import进来
            const car ={template:'<div>购物车页面</div>'}
            const order = {template:'<div>订单页面</div>'}
            const shop = {template:'<div>商品页面</div>'}
            /*定义路由*/
            //每个路由应该映射一个组件
            const myroutes=[
            /*注意这里的是components ，不是component*/
                {path:'/g',components:{default:car,a:order}},
                {path:'/d',components:{default:order,a:shop}}
            ]
            /*创建router实例，然后传'routes'配置*/
            const myr =new VueRouter({
                routes:myroutes
            })
            /*创建和挂载根实例*/
            const app =new Vue({
                router:myr
            }).$mount('#app')
        </script>
    </body>
</html>