码迷,mamicode.com
首页 > 其他好文 > 详细

Vue学习手记03-路由跳转与路由嵌套

时间:2019-07-14 19:35:57      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:port   import   路由   one   一个   参数传递   不能   class   router   


1.路由跳转

  1.   添加一个LearnVue.vue文件,
  2.   在router->index.js中 引入import Learn from ‘@/components/LearnVue‘
  3.   在touter中添加路由说明
 export default new VR({
    routes:[
      {
        path:"/hello",
        name:"HelloWorld",
        component:HelloWorld
      },
         {
        path:"/learn",
        name:"Learn",
        component:Learn
      }      
    ]
  })

 

    4.在需要切换的地方使用标签router-link

    <ul>
      <router-link tag="li" to="hello"> hello</router-link>
      <router-link to="learn"> learn</router-link>
    </ul>

  属性:

  • to="hello"指定跳转的路由页面
  • tag 可以用于指定router-link标签的渲染标签,tag="li"就是安装li的标签样式来渲染。


2.动态路由(参数传递)
  /:id  多个参数就 /:id/:name

3.路由嵌套
01.引入子路由后
02.在创建路由时,添加一个children ,多级嵌套就添加多个children

export default new VR({
      routes:[
      {
        path:"/hello",
        name:"HelloWorld",
        component:HelloWorld
      },
         {
        path:"/learn",
        name:"Learn",
        component:Learn,
    children:[
      {
        path:"base",
        component:Base    
      }
    ]
      }      
    ]
  })


03跳转的地方:to="/Learn/Base"这个要写全,不能只写Base

<router-link tag="li" to="/Learn/Base"> Base </router-link>

 

Vue学习手记03-路由跳转与路由嵌套

标签:port   import   路由   one   一个   参数传递   不能   class   router   

原文地址:https://www.cnblogs.com/somethingWithiOS/p/11185062.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!