vue-router

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)
    }

  }