关于vue看到有很多的知识点和react有很多相近的地方,比如说路由还有一些简单的运用,但是又有一些不同,比如格式、还有写法的一些不同!

所以在这里我总结一下关于vue 关于路由的一些运用:

路由:

1、在总页面中设置路由以及参数名,例如

  {

    path:"/hellopage/:id",

    name:'hellopage',

    component:hellopage

  }

2、在新页面进行配制文件,

  这样点击之后就会跳转到新的页面,有两种方式:

  一:通过路由跳转  :to="/路径/参数"

  二:通过点击按钮,触发函数跳转   @click="跳转函数名”

  <div>

    <router-link  :to="{path:'/hellopage/123'}">第一个点击跳转</router-link>

    <router-link  :to="{path:'/hellopage/789“ query:{userid:9855,username:'liumcb‘}}>第一个点击跳转</router-link>

    <button  @click="clickhandle">这是点击跳转按钮</button>

  </div>

  

  如果是路由跳转,不需要在这个页面有什么额外操作了,若是函数跳转, 则需要添加新的一些methods方法

  methods:{

    clickpage:function(){

    this.$router.path({path:"/hellopage/224",query:{userid:566,name:"liumcb2"}})

  }

}

3、在新的页面接受参数

  export default {

  name:"hellopage",

  data(){

    return (){

    //设置接受参数的参数名

    id:this.$route.params.id.    //接受参数,这个参数就是第一个页面中,配制的参数

    userid:this.$route.query.userid,    //这个参数是从路由中接收到的设置的query参数

    username:this.$route.query.name

    }

  }

}

  在新的页面中使用这些参数

  <div>

    <p>接受的参数id:<span>{{{id}}</span></p>

    <p>接受的参数userid:<span>{{userid}}</span></p>

    <p>接受的参数username:<span>{{username}}</span></p>

  </div>

 

总结起来 这就是路由的一些用法了,看起来跟react十分相似;

1、其中router-link 中可以添加query={id:'123‘}  query的作用是给链接后面拼接内容。

  例如,原来是  newpage/123?id=123 

  所以,当为链接添加更多参数的时候,可以使用query参数进行拼接url

 

2、给页面添加子页面的时候,在需要添加子页面的地方添加

  <router-view></router-view>
  并且在router路由的页面引用子页面,并且添加新子页面的路由:
  
  {
    path: '/newpage/:id',
    name: 'newpage',
    component: newpage,
    children:[
      {path:'info/:id',component:info},
      {path:'content/:id',component:content},
    ]
  }
 
 
 
 

 

 

posted on 2017-10-31 13:20  liumcb  阅读(93)  评论(0编辑  收藏  举报