Vue规模化

一、路由

后端路由：对于普通的网站，所有的超链接都是URL地址，URL地址对应服务器上的资源；
前端路由：对于单页面应用程序，主要通过URL中的hash（#）来实现页面跳转，HTTP请求中不会包含hash相关的内容。

插件下载：https://github.com/vuejs/vue-router，https://unpkg.com/vue-router/dist/vue-router.js

在Vue后面加载vue-router，它会自动安装。

<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>

1、路由的基本使用

<div id="app">
  <!-- 点击a链接，修改url地址，Vue实例上的router监听到url地址的改变，展示对应组件 -->
  <!-- <a href="#/foo">Go To Foo</a> -->
  <!-- <a href="#/bar">Go To Bar</a> -->
  
  <!-- <router-link>默认会被渲染成一个<a>标签，通过传入to属性指定链接地址 -->
  <router-link to="/foo">Go To Foo</router-link>
  <router-link to="/bar">Go To Bar</router-link>
  
  <!-- 路由出口，路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

<script>
  // 1.定义（路由）组件
  const Foo={template:'<div>foo</div>'};
  const Bar={template:'<div>bar</div>'};

  // 2.定义路由
  // path：监听的路由链接地址。component：要展示的组件，是一个模板对象，不能是组件名
  const routes=[
    {path:'/foo',component:Foo},
    {path:'/bar',component:Bar}
  ];

  // 3.创建router实例，配置路由
  const router=new VueRouter({
    routes // 相当于routes:routes
  });

  // 4.创建Vue实例，注册路由
  const vm=new Vue({
    el:'#app',
    router // 注册路由，监听url地址的变化，展示对应组件
  });
</script>

2、重定向和别名

重定向：当用户访问/a时，url将会被替换成/b，然后匹配路由为/b，如用于使根路径重定向为显示某个组件。重定向通过routes配置来完成。

const routes=[
  {path:'/',redirect:'/foo'}, // 重定向
  {path:'/foo',component:Foo}
];

别名：/a的别名是/b意味着，当用户访问/b时，url保持为/b，但路由匹配为/a，和访问/a一样。

const routes=[
  {path:'/a',component:A,alias:'/b'}
];

3、<router-link>

tag：使用tag属性指定router-link渲染的标签类型，默认值'a'。还是会监听点击，触发导航。

linkActiveClass：这是路由构造函数中的选项，设置链接激活时使用的CSS类名，默认值"router-link-active"。通过该类名可设置路由高亮的样式。

4、路由组件传参

（1）? & $route.query

使用查询字符串给路由传递参数，不需要修改路由规则的path属性。

<router-link to="/foo?id=10&name=cong">Go To Foo</router-link>

const foo={
  template:'<div>Foo--{{$route.query.id}}--{{$route.query.name}}</div>',
  created(){
    console.log(this.$route.query.id);
  }
}

（2）/ : $route.params

<router-link to="/foo/10/cong">Go To Foo</router-link>

const foo={
  template:'<div>Foo--{{$route.params.id}}--{{$route.params.name}}</div>',
  created(){
    console.log(this.$route.params.id);
  }
}
const routes=[
  {path:'/foo/:id/:name',component:foo}
];

（3）props

5、嵌套路由

<div id="app">
  <router-link to="/user">User</router-link>
  <router-view></router-view>
</div>

<template id="user">
  <div>
    <h3>最高级路由</h3>
    <router-link to="/user/profile">Profile</router-link> <!-- 嵌套<router-link> -->
    <router-view></router-view>                           <!-- 嵌套<router-view> -->
  </div>
</template>
<script>
  const User={
    template:'#user'
  };

  const Profile={ // 嵌套路由的组件
    template:'<div>被嵌套的路由</div>'
  };

  const router=new VueRouter({
    routes:[
      {
        path:'/user',
        component:User,
        children:[ // 用children定义嵌套路由
          {path:'profile',component:Profile} // 没有/,以/开头的嵌套路径会被当作根路径
        ]
      }
    ]
  });

  const vm=new Vue({
    el:'#app',
    router
  });
</script>

6、命名视图

有时想同级展示多个视图，而不是嵌套展示。可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view没有设置名字，默认为default。

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。使用components配置（带上s）。

<div id="app">
  <router-view></router-view>
  <router-view name="left"></router-view>
  <router-view name="main"></router-view>
</div>
<script>
  const router=new VueRouter({
    routes:[
      {path:'/',components:{
        default:header,
        left:leftBox,
        main:mainBox
        }
      }
    ]
  });
</script>