Vue2.0——路由

路由

1、概念：

• SPA

  SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换 HTML（采用的是 div 切换显示和隐藏），从而实现UI与用户的交互。在 SPA 应用中，应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并有赖于内容Region（区域）中的视图切换来展示内容。

• 后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务
  前端路由:不同的网址对应各自的页面
  vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件
  vue-router就是专门做切换组件的功能,它是一个单独的技术,依赖vue
  就像jQuery和dom操作一样

2、前端路由的工作方式：

1. 用户点击了页面上的路由链接；
2. 导致了URL地址栏中的Hash值发生了变化；
3. 前端路由键听到了Hash地址的变化；
4. 前端路由把当前Hash地址对应的组件渲染到浏览器中。

3、环境配置

1、最常用的方法：

cli安装，不会出错

• vue create init 回车之后，
• 按空格键选择router然后回车，官方直接搭建路由。

2、npm 下载引入使用 （不推荐，打包之后容易出问题）

• npm i vue-router --save或者 npm i vue-router --S

• 在main.js入口文件中引入

   import Vue from "vue"
   import VueRouter from "vue-router"//引入路由工具
   import App from "./App.vue"
   Vue.use(VueRouter)//注入路由,就是运行路由的相关函数和给vue绑定东西:比如$router
   
   //创建路由工具
   const router=new VueRouter({
       
  	 //routes路由器 生成很多网址对应的切换组件
  	 routes:[{
       path:"/home",component:()=>import("./home.vue")},
               {
       path:"/about",component:()=>import("./about.vue")}]
   })
   new Vue({
       
  	 router,//把路由挂载到页面
  	 render(h){
       return h(App)}
   }).$mount("#app")
  

• 在App.vue中写

   <router-view></router-view>
  

4、基本用法

5、(路由导航)跳转页面的几种方法

1、声明式导航：在浏览器中，点击链接实现导航的方式。

• router-view:相当于占位符， 路由网址匹配到的组件 会渲染到当前组件的这个标签上

  //app.vue中占位
  <router-view></router-view>
  <a href="/home">首页</a>
  <a href="/pengyou">朋友</a>
  <a href="/pengyouquan">朋友圈</a>
  <a href="/shezhi">设置</a>
  
  
  //router/index.js中
  //先导入要展示的组件
  import Home from '@/components/Home.vue'
  const router=new VueRouter({
       
  	{
       path:'/home',component:Home},
                             
  })
  

• router-link:相当于a标签,给我们提供跳转到某个路由的功能,如果没有匹配到路由就会跳转失败,只是局部刷新，比a链接跳转更优化:

  //app.vue
  <router-view></router-view>  //占位显示组件
  
  <router-link to="/home">首页</router-link>
  <router-link to="/pengyou">朋友</router-link>
  <router-link to=