标签:数据 params 针对 template 要求 ase roc child loaded
路由:路:路径(地址) 由:方向 针对于单页面应用,所提供的一个解决方案。根据地址传递的参数,来决定具体要使用的组件。 1、下载(如果已下载该步可以省略) cnpm install vue-router -S 2、引入 import Router from ‘vue-router‘ 3、安装: Vue.use(Router) 4、生成router对象 export default new Router({ mode: ‘history‘, base: process.env.BASE_URL, routes: [ { path: ‘/‘, name: ‘home‘, component: Home }, { path: ‘/about‘, name: ‘about‘, // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ ‘./views/About.vue‘) } ] }) ************************************************************** 引入组件有两种方法 1、import One from ‘@/views/One‘ { path:"/one", component:One } 2、 { path:"/two", component:()=>import(‘@/views/Two‘) } ************************************************** 路由如何引入子组件 1、在components下新建一个文件Child.vue 2、在路由组件当中使用时 1、 import Child from "@/views/Child" export default { components:{ Child } } 2、 export default { name: "one", components:{ Child:()=>import(‘@/components/Child‘) } } ************************************************ router-view:是一个内置的组件。将符合要求的路由所指向的组件进行渲染的地方。 router-link:是一个内置组件。可以实现组件的切换。 属性: 1、to:跳转到什么路由 * 地址是不区分大小写的。对大小写不敏感 * 如果地址相同,以第一次优先。 ***************************************** 404: { path:"*", component:()=>import("@/views/Error") } **************************************** 别名:可以通过“/"或“/home"来进行访问 { path: ‘/‘, name: ‘home‘, alias:"/home", component: Home }, * :提供了另外一种访问该路由的方式。 ***************************************** 重定向: { path:"/lalala", redirect:"/two" }, *当你的地址为lalala时,重定向到path为“/two" 的路由 **************************************** 如何实现路由的跳转 <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>| <!--<router-link to="/one">One</router-link>|--> <!--<router-link :to="one">One1</router-link>|--> <!--<router-link :to="{path:‘/one‘}">One2</router-link>|--> <router-link :to="{name:‘xixi‘}">One3</router-link>| <router-link to="/two">two</router-link>| ******************************************************************* 单页面多路由 { path:"/three", // component:()=>import("@/views/Three") components:{ one:()=>import("@/views/One"), two:()=>import("@/views/Two"), three:()=>import("@/views/Three"), default:()=>import("@/views/MyTwo") } } template: one:<router-view name="one"/> <hr/> two:<router-view name="two"/> <hr/> three:<router-view name="three"/> <hr> <router-view></router-view> <hr> <router-view></router-view> ******************************************************************* * this.$route来得到当前路由的配置信息。 路由传值: 1、query 1、如何传递 <router-link to="/query?a=1&b=4">query</router-link>|--> <router-link :to="{name:‘query‘,query:{a:3,b:7}}">query</router-link>| <router-link :to="{path:‘/query‘,query:{a:1,b:3}}">query</router-link>| 2、如何接收 this.$route.query;// {a:xx,b:xxx} 优点:刷新数据不会丢失.还可以传递对象 2、params 1、如何传 *:params不可以与你的path结合使用。 <router-link :to="{name:‘params‘,params:{a:1,b:3}}">params</router-link> 2、接收: this.$route.params.// {a:1,b:3} 缺点:刷新数据不存在。 3、设置路由 1、配置路由 { name:"setRouter", path:"/setRouter/:a/:b", component:()=>import("@/views/SetRouter") } 2、传 <router-link :to="{path:‘/setRouter/1/2‘}">setRouter</router-link>| <router-link :to="{path:‘/setRouter/1/2‘}">setRouter</router-link>| 3、接收 this.$route.params ******************************************************************** 路由编程式导航:通过你的JS语句来控制你路由的跳转。 this.$router.push("/"); this.$router.push({name:"query",query:{a:5,b:8}}); this.$router.push({name:"params",params:{a:5,b:8}}); this.$router.go(-1):后退 this.$router.go(1):前进
标签:数据 params 针对 template 要求 ase roc child loaded
原文地址:https://www.cnblogs.com/zcccz/p/11396837.html