Vue2：router-view / router-link标签 、页面跳转

router-view / router-link标签

router-view:相当于 路由网址匹配到的组件 会渲染到当前组件的这个标签上(学不学的会路由 就看能不能理解这个)

<router-view></router-view>

 

router-link:相当于a标签,给我们提供跳转到某个路由的功能,如果没有匹配到路由就会跳转失败:
<router-link to="/xx"> xx<router-link >
编程式跳转: this.$router.push({path:"路由"})

 

　　　　 <!-- a标签会请求服务器 然后刷新网页 因此用在链接外部网站 -->
 　　　　<a href="/login"></a> 
        <!-- 
          它渲染到页面也是a标签 但是只是改变了地址栏的网址并没有重新加载网页 
          路由的底层就是采用的 history去监听地址栏的变化 然后把当前APP组件中的router-view切换了
          因此这种跳转用在网站内部的路由跳转
         -->
        <router-link to="/login">router-link to</router-link>

　　　　 <router-link :to="{path:'/login'}">router-link :to</router-link>
　　　　 <button @click="btn">js  go to login</button>

 

页面跳转

methods:

btn() {

　　// this.$router绑定在组件原型链上的 路由对象 它有一些功能

 // this.$router.push("/login")

　　this.$router.push({path:"/login"})
}