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

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/:name3.路由嵌套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