路由

路由用来实现简单的单页跳转

1.基础(分为5步)

<style>
      .active{        (点击导航改变其颜色)
            color:red
      }
</style>

（第1.编辑属性导航）
<div>
      <router-link to="/index">主页</router-link>
      <router-link to="/first">子页</router-link>
      <router-view></router-view>
</div>

<script src:'vue.js链接'></script>
<script src:'vue.router链接'></script>     (在这儿链接的顺序是固定的)

<script>
      (第2.创造组件)
      var Index={
            template:`
                  <h1>这是主页</h1>
            `
      };
      var First={
            template:`
                  <h2>这是分页</h2>
            `
      };
      (第3.配置路由)
      const routes=[      
            {path:'/',component:Index},
            {path:'/index',component:Index},
            {path:'/first',component:First}
      ];
      (第4.创建路由实例)
      const router=new VueRouter({
            routes:routes,
            linkActiveClass:'active'      （为导航设置快捷名字）
      });
      (第5.路由实例倒挂载到vue实例上)
      new Vue({
            el:'.nr',
            router:router
      })
</script>

2.进阶（嵌套）

<script>
      var Index={
            template:`
                  <h1>这是主页</h1>
            `
      };
      var First={
            template:`
                  <div>
                  <h2>这是分页</h2>
                  <ul>      (哪个分页的子页就在哪儿加入子页的链接)
                        <li>
                              <router-link to='/first/login'>登录</router-link>
                        </li>
                        <li>
                              <router-link to='/first/regist'>注册</router-link>
                        </li>
                  </ul>
                  <router-view></router-view>
                  </div>
            `
      };
      var Login={
            template:`
                  <h3>这是登录</h3>
            `
      };
      var Regist={
            template:`
                  <h3>这是注册</h3>
            `
      };
      const routes=[      
            {path:'/',component:Index},
            {path:'/index',component:Index},
            {
                  path:'/ffirst',
                  component:First,
                  childer:[
                        {path"login",component:Login},
                        {path:"regist",component:Regist}
                  ]
            }
      ];
      const router=new VueRouter({
            routes:routes,
            linkActiveClass:'active'
      });
      new Vue({
            el:'.nr',
            router:router
      })
</script>