Vue学习手记03-路由跳转与路由嵌套-优快云博客

博客介绍了Vue的路由相关知识，包括路由跳转，需引入文件、添加路由说明并使用router - link标签；动态路由可通过 /:id 等形式传递参数；路由嵌套要引入子路由，创建路由时添加children，跳转时路径需写全。

1.路由跳转

添加一个LearnVue.vue文件，
在router->index.js中引入import Learn from '@/components/LearnVue'
在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>

转载于:https://www.cnblogs.com/somethingWithiOS/p/11185062.html