VueRouter

使用VueRouter的前提：

　1，必须导入vue-router.js文件
2，要有VueRouter()实例
3，要把VueRouter实例挂载到Vue实例中
　 4，路由的入口
    　　　　<router-link to='/index'>index页面</router-link>
   5，路由的出口
    　　　　<router-view></router-view>

第一个VueRouter实例：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="d1">
        <!--路由的入口-->
        <!--里面必有这个to="路径" 属性-->
        <router-link to="/index">index页面</router-link>
        <router-link to="/home">home页面</router-link>
        <hr>
        <!--路由的出口-->
        <router-view></router-view>
    </div>
</body>
<script src="vue.js"></script>
<script src="VueRouter.js"></script>
<script>
    //写路由
    const routes = [
        {
            path:"/index",
            component:{
              template:`<div>
                            <h1>这是index页面</h1>
                         </div>`,
            },
        },
        //  每一个路由都是一个对象，属性是path:对应的是路径
        // component：里面是template 里的内容将会挂载到页面上。
        {
            path:"/home",
            component:{
                template:`<div>
                              <h1>这里是home页面</h1>
                           </div>`,
            }
        }
    ];
    // 生成VueRouter示例
    const router_obj = new VueRouter({
        routes:routes
    });
    var app = new Vue({
        el:"#d1",
        data:{},
        router:router_obj    // 将路由实例挂载到Vue实例中
    })
</script>
</html>

路由的模糊匹配：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="d1">
        <router-link to="/user/清秋?age=17">清秋页面</router-link>
        <router-link to="/user/小白?age=17">小白页面</router-link>
        <!--  ？后跟的会存到一个query中，后面只需要从query中调取就可以了-->
        <hr>
        <router-view></router-view>
    </div>
    <script src="vue.js"></script>
    <script src="VueRouter.js"></script>
    <script>
        const routes = [
            {
                path:"/user/:name",
                // :后跟的就是模糊查询的，类似于正则
                component:{
                    template:`<div>
                                    <h1>这里是{{$route.params.name}}的主页页面！</h1>
                                    <p>他{{$route.query.age}}岁</p>
                               </div>`,
                }
            },
        ];
        //生成VueRouter实例
        const router_obj = new VueRouter({
            routes:routes
        });
        var app = new Vue({
            el:"#d1",
            data:{},
            router:router_obj  //将路由实例挂载到Vue实例中
        })
    </script>
</body>
</html>

子路由：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="d1">
        <router-link to="/index/qingqiu">清秋的主页</router-link>
        <hr>
        <router-view></router-view>
    </div>
    <script src="vue.js"></script>
    <script src="VueRouter.js"></script>
    <script>
        const routes = [
            {
              path:"/index/:name",
              component:{
                  template:`<div>
                                 <h1>这里是{{$route.params.name}}的主页</h1>
                                 <hr>
                                 <router-link to="info" append>他喜欢的music</router-link>
                                 <hr>
                                 <router-view></router-view>
                             </div>`,
              //    在父路由里写上子路由的的链接 标签属性里加上append:可以在原有路径的后面追加路径信息
              },
                children:[
                    {
                        path:"info",
                        component:{
                            template:`<div>
                                            <h1>忘记时间</h1>
                                            <p>沉默着，走了有，多遥远</p>
                                       </div>`,
                        }
                    }
                ],
            },
        ];
        const router_obj = new VueRouter({
            routes:routes
        });
        var app = new Vue({
            el:"#d1",
            data:{},
            router:router_obj,
        })
    </script>
</body>
</html>