Vue-router VUE路由系统

Posted 2020-10-22 forjie

 

一：定义：

是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

二:基本用法

实现页面的两个页面的来回跳转

<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/index">为业</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>


</div>

<script src="../es6/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<script src="../js/app.js"></script>

html页面

 

var routes=[
    {
        path:‘/‘,
        component:{
            template:`
            <div>
            <h1>首页</h1>
</div>
            `
        }
    },

    {
      path:‘/index‘,
      component:{
          template:`
          <div>
          <h1>第二页</h1>
</div>
          
          `
      }
    }
]

var router=new VueRouter({
    routes:routes
})

new Vue({
    el:‘#app‘,
    router:router
})

在js页面

 

三：传参数：

      <router-link to="/user/王华">王华</router-link>
        <router-link to="/user/huahua">huahua</router-link>

 

 

{
      path:‘/user/:name‘,  # 这里用/：分割开要穿的参数
      component:{
          template:`
          <div>
          <h1>我叫：{{$route.params.name}}</h1>  #{{$route.params}}是固定格式后面.name跟的是路径后面的参数
</div>  
          `
      }
    }

js页面

还有一种的根据路径？后面加参数传参。自己了解。

 

四：子路由,推荐第二种

var routes=[
    {
        path:‘/user/:name‘,
        component:{
            template:`
            <div>
            <h1>首页</h1>
<router-link>{{$route.params.name}}<router-link>  #显示传参信息
<router-link :to=" ‘/user/‘ +$route.params.name  +‘more‘ "></router-link>
<router-view></router-view>   
#这里需要拼接路由，把子路由拼接到全部路由上。
</div>
            `
        }
        children:{
          path:‘more‘,
          component:{
           template:`
<div>
<h1>更多信息</h1>
</div>
`
}

}
   
    },

js文件中---拼接路径完成子路由

<router-link to="more" append>更多信息</router-link>
在后面加一个append就可以

js文件

PS：第一种要在to前面加上 ：，第二种则不需要

 

五：绑定点击事件，执行路径的方法

<input type="button" value="按钮" @click="surf"> 

#绑定点击时间

new Vue({
    el:‘#app‘,
    router:router,
    methods:{
        surf:function() {
            setTimeout(function () {
                this.router.push(‘/‘),      #把该路径的方法传到router里去
                    setTimeout(function () {
                        this.router.push(‘/user/huahua‘)   #再次把路径方法传到里面去
                    })
            }, 2000)
        }
    }
})

js页面

 

六：命名多个<router-view>

    <router-link to="/lit">first</router-link>
        <router-link to="/lat">second</router-link>

 <div>
        <router-view name="first"></router-view>
        <router-view name="second"></router-view>
    </div>

html页面

var res=[
    {
        path:‘/lit‘,
        component:{
            first:{                             #这里指定用哪个routes-view
                template:`
                <div>
                <h1>first</h1>
</div>
                
                `
            }
        }
    },
    {
        path:‘/lat‘,
        compenent:{
            second:{                                  #这里用second的routes-view
                template:`
                <h1>second</h1>
                `
            }
        }
    }
]

js页面