Vue-router 前端路由

前端路由:

前端路由主要是使用Hash （....#/login）进行路由切换的，不会刷新页面，类似于页面中的锚链接，只是在单页面中进行切换，并不会向后端发送请求。

后端路由：

后端路由主要是没有路由都会向后端发送请求,都会刷新页面

1.组件的路由切换<div id="app">
    <!-- 使用router-link 代替原本的a链接 tag表示最终渲染成的标签 同时具备了点击切换组件的功能 -->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register" tag="a">注册</router-link>
    <!-- 切换的组件的占位符 ，显示切换到的组件-->
    <router-view></router-view>
  </div>


  <template id="login">
    <h3>登录</h3>
  </template>
  <template id="register">
      <h3>注册</h3>
    </template>

  <script>



    var login = {
      template:"#login",
    }
    var register = {
      template:"#register"
    }

    const router = new VueRouter({
      routes:[

　　　　　　// component中的login是子组件对象，不是字符串。
        {path:"/",redirect:"/login"}, //设置默认路由 重定向
        {path:"/login",component:login, alias: ‘/b‘}, //alias 起别名 使用/b 和使用/login的作用一样 都会跳转到login组件上。
        {path:"/register",component:register},


      ]
    })

   new Vue({
    el:"#app",
    data:{
    },
    components:{
      login,register
    },
    // 将路由和Vue实例实现绑定。
    router:router,//也可直接 router,
   })

 2.路由嵌套

<div id="app">
    <h3>主页</h3>
    <router-link to="/main">main页面</router-link>
    //maink组件的占位
    <router-view></router-view> 
  </div>

  <template id="maink">
   <div>
      <h3>main</h3>
      <router-link to="/main/login" >登录</router-link>
      <router-link to="/main/register">注册</router-link>
     <transition name="my" mode="out-in">
        // 登录或是注册组件的占位
        <router-view></router-view>
     </transition>
   </div>
  </template>

  <template id="login">
    <h3>登录</h3>
  </template>
  <template id="register">
      <h3>注册</h3>
  </template>

  <script>

    var maink = { //template的id值不能和DOM的标签一样
      template:"#maink",
    }

    var login = {
      template:"#login",
    }
    var register = {
      template:"#register"
    }

    const router = new VueRouter({
      routes:[
        {
          path:"/main",
          component:maink,
          children:[//子路由
            {
              path:"login",//注意不是从根目录开始的 不加斜杠
              component:login,
            },{
              path:"register",
              component:register
            }

          ]
        },
       
      ]
    })

   new Vue({
    el:"#app",
    data:{
    },
    components:{
      login,register,
      maink 
    },
    // 将路由和Vue实例实现绑定。
    router:router,//也可直接 router,
   })

 3.路由传值

<div id="app">
  
    <router-link to="/login?id=99&name=zzzz">登录</router-link>
    <router-link to="/register/444">注册</router-link>
    <router-view></router-view> 
  </div>

  <template id="login">
    <div>
      // 当直接在链接中使用?来进行Key value的拼接的时候，在组件中通过 $route.query 来接收要查询的数据  无需修改路由验证规则
        <h3>登录=------{{this.$route.query.name}}</h3>
    </div>
  </template>

  <template id="register">
     <div>
       // 当在连接中使用 /register/444 这样的路由的时候，并且需要修改router中的路由规则/register/:id，使用$route.params来获取数据
        <h3>注册------{{this.$route.params.id}}</h3>
     </div>
  </template>

  <script>
    var login = {
      template:"#login",
    }
    var register = {
      template:"#register",
    }
    const router = new VueRouter({
      routes:[
        { path:"/login", component:login },
        { path:"/register/:id", component:register },
       
      ]，
　　　　　　linkActiveClass:"myactive", //点击切换组件的是时候 连接高亮 "myactive" 自定义类选择器


    })

   new Vue({
    el:"#app",
    data:{
    },
    components:{
      login,register
    },
    // 将路由和Vue实例实现绑定。
    router:router,//也可直接 router,
   })
 
 </script>

 4.命名视图

<div id="app">
    <router-view></router-view> 
    <!-- 名字和components中的一样 -->
    <router-view name="left"></router-view>  
    <router-view name="right"></router-view> 
  </div>

  <template id="top">
    <div>
        <h3>top</h3>
    </div>
  </template>

  <template id="left">
     <div>
        <h3>left</h3>
     </div>
  </template>
  <template id="right">
      <div>
         <h3>right</h3>
      </div>
   </template>

  <script>
    var top1 = { //top 也不可以作为组件对象名
      template:"#top",
    }
    var left = {
      template:"#left",
    }
    var right = {
      template:"#right"
    }
    const router = new VueRouter({
      routes:[
        { 
          path:"/", 
          components:{ //是个components对象
            default: top1,
            left:left,
            right:right,
          }
         },
      ],
    })

   new Vue({
    el:"#app",
    data:{
    },
    components:{
      top,left,right
    },
    // 将路由和Vue实例实现绑定。
    router:router,//也可直接 router,
   })
 
 </script>