vue的单页面应用是在路由和组件基础上应用,路由用于设定访问路径,和将路径、组件映射在一起。在vue-router单页面应用中,不用以往超链接来实现页面的切换和跳转,而是组件的切换,即路径的切换。
一、router-link制作导航
1.router-link是一个组件,可以通过to属性跳往指定的链接地址。
//to:导航路径,默认首页。
<router-link to="/">[text]</router-link>
2.router-view用于渲染匹配到的组件
//给router-view设置transition过渡 <transition name="fade"> <router-view ></router-view> </transition>
二、动态路由配置
每条路由以key-value的形式存在,key是路径,value是组件。例如:'/home'是一条路由的key,它表示路径;component: Home则表示该条路由映射的组件:
routes = [ { path:'/home', component:Home, //Home组件下的子组件 children:[{ path:'test1', component:Test1 },{ path:'test2', component:Test2 }] }, { path:'/about', name:'About', component:About, // alias 别名 alias:'/abc' } ]
三、参数传递
1.通过<router-view>标签中的to传递参数
//1.query传参,会把参数拼接在url上 页面刷新参数不会丢失 //在页面中获取是通过$router.query.xxx <router-link :to="{path:"/home",query:{id:111,name:'zs'}}">主页面</router-link> //2.params传参 会把参数拼接在url上 页面刷新参数会丢失 //在页面中获取是通过$router.params.xxx <router-link :to="{name:'/About',params{num:222}}">关于页面</router-link> //3.url传参 会把参数拼接在url上 页面刷新参数不会丢失 //在页面中获取是通过$router.params.xxx <router-link :to="activity/333">活动页面</router-link>
四、重定向和导航式编程
如果直接想进入某个页面,有俩种方式:
1.redirect基本重定向:
const routes = [ {path:'/',redirect:'/home'} ] //重定向的目标是一个命名的路由: const routes = [ { path:'/', redirect:{name:'home'}} ] //重定向时传递参数 { path:'/', redirect:'/home/:id/:name' }
2.编程式导航:
router.push方法可以导航到不同链接,该方法会向history栈添加一条新记录。
<router-link :to="...">等价router.push(...)
//跳转到主页面 goHome(){ // 编程式导航 通过query传参 this.$router.push({ path:'/home', query:{ id:111, name:'lisi' } }) } goActivity(){ //编程式导航 通过params传参 this.$router.push({ name:'Activity', params:{ number:333 } }) }, goBack(){ // 返回上一页 this.$router.go(-1) } }