vue学习笔记——vue-router

1.什么是前端路由？

前端路由是根据不同的URL地址显示不同的内容或页面。

2.什么时候使用前端路由？

在单页面应用时，大部分页面结构不变，只改变部分内容的时候应用。

SPA：单页web应用，就是只有一张web页面的应用，是加载单个HTML页面并在用户与应用程序交互时，动态更新的web应用程序。

3.vue前端路由——vue-router

vue-router是用来构建SPA（single page web application）的关键。

4.vue-router使用

HTML

<router-link></router-link>

JS

this.$router.push({path:' '});

5.vue-router分类：动态路由、嵌套路由、编程式路由、命名路由和命名空间

1.动态路由

export default new Router({
  routes: [
    {
      path:'detail/:detailId',
      name:'Detail',
      component:Detail
    }
  ]
})

访问http://localhost:18080/#/detail/123即可查看detailId为123的detail页面
2.嵌套路由

export default new Router({
  routes: [
    {
      path:'detail',
      name:'Detail',
      component:Detail,
      children:[
          {
            path:'text',
            name:'text',
            component:Text
          }
      ]
    }
  ]
})

<router-link to="/detail/text">显示detail详情页文本信息</router-link>
<div>
  <router-view></router-view>//router-view是一个载体，专门用来承担组件渲染，在Detail页面中定义router-view定义一个载体用来渲染
</div> 

在detail组件中，点击router-link按钮，访问http://localhost:18080/#/detail/text链接，即可查看detail的子页面text页面
3.编程式路由(通过js来实现页面跳转)

$router.push("name")
$router.push({path:"name"})
$router.push({path:"name?id=123"})
$router.push({path:"name",query:{id:123})
$router.go(1)

4.命名路由和命名空间
命名路由（给路由定义不同的名字，根据名字进行匹配）

export default new Router({
  routes: [
    {
      path:'detail:detailId',
      name:'Detail',
      component:Detail
    }
  ]
})

通过name来跳转路由

<router-link :to="{name:'Detail'，params:{detailId:123}}"></router-link>

命名空间（给不同的router-view定义名字，router-link通过名字进行对应组件的渲染。）

export default new Router({
  routes: [
    {
      path: '/detail',
      name: 'Detail',
      components:{
        default:Detail,
        text:Text,
        img:Img,
      } 
     } 
  ]
})

<router-view></router-view>//渲染detail组件
<router-view name="text" ></router-view>//渲染text组件
<router-view name="img"></router-view>//渲染img组件