2020-09-02 Vue 路由

路由

1. 前端路由：根据不同的path，显示不同的组件
1. 渐进性框架：
- (1). 路由功能是以 vue 插件的形式灌入Vue函数上（vue.js核心包，没有路由）
- (2). 路由功能单独拿出来 vueRouter(插件的形式灌入Vue构造函数)
- (3). 路由用于构建 spa （单页面应用）应用

分析单页面应用的优劣势

1. 优势: 单页面应用，在我们“页面”（地址改变），不会重新加载另一个html，只是切换路由显示。隐藏，页面切换速度以及不同页面加载很快
1. 劣势: 对于seo不友好,无法抓取页面结构（解决方式利用vue，ssr服务端渲染）

https://router.vuejs.org/zh/

  <!-- 在 Vue 后面加载 vue-router，它会自动安装的： -->
  <script src="./js/vue.js"></script>
  <script src="./js/vue-router.js"></script>
</head>
<body>
  <div id="app">
    <h1>Hello App!</h1>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <!-- 通过设置tag属性来改变router-link的默认样式 -->
    <router-link to="/home" tag="button">Go To Home</router-link>
    <router-link to="/news">Go To News</router-link>


    <!-- 想要显示对应的路由，还需要路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>

  <template id="home">
    <h2>Home页组件</h2>
  </template>

  <template id="news">
    <h2>News页组件</h2>
  </template>
</body>
<script>

  //定义组件,路由切换时显示对应的组件
  let Home = {
    template:'#home'
  }

  let News = {
    template:'#news'
  }

  //定义路由，每个路由都应该映射一个组件。有path属性，component是对应的组件
  const routes = [
    {
      path:'/home',
      component:Home
    },
    {
      path:'/news',
      component:News
    }
  ]

  //创建路由实例，然后传routes配置规则
  const router = new VueRouter({
    routes //缩写，相当于routes：routes,在这里使用定义好的路由规则
  })

  // 通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，
  // 也可以通过 this.$route 访问当前路由：


  let vm = new Vue({
    el:'#app',
    router  //这里将路由挂载到实例上
  })
</script>

动态路由

  <style>
    .router-link-active {
      background: cadetblue;
    }
  </style>
  <script src="./js/vue.js"></script>
  <script src="./js/vue-router.js"></script>
</head>
<body>
  <div id="app">
    <!-- 出口 -->
    <router-view></router-view>

    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <!-- 通过设置tag属性来改变router-link的默认样式 -->
    <router-link to="/home" tag="button">Go To Home</router-link>
    <router-link to="/news">Go To News</router-link>
  </div>

  <template id="home">
    <h2>Home页组件</h2>
  </template>

  <template id="news">
    <h2>News页组件
      <router-link to="/news/1"> 
        我是新闻1
      </router-link>
      <router-link to="/news/2">
        我是新闻2
      </router-link>
      <router-link to="/news/3">
        我是新闻3
      </router-link>
    </h2>
  </template>
</body>
<script>
  //定义组件,路由切换时显示对应的组件
  let Home = {
    template:'#home'
  }

  let News = {
    template:'#news'
  }

  //匹配404页面
  let NotFound = {
    template:`
      <h1>404</h1>
    `
  }

  //定义一个新闻详情子组件
  let NewsSon = {
    template:`
      <div>
        <h2>新闻详情</h2>  
      </div>
    `,
    mounted(){
      //在这里获取到动态路由传的参数，及:id
      console.log(this.$route.params.id);
    }
  }

  //定义路由
  const routes = [
    {
      path:'/news',
      component:News
    },
    {
      //重定向
      path:'/',
      redirect:'/news'
    },
    {
      // 动态路径参数 以冒号开头
      path:'/news/:id',
      component: NewsSon
    },
    {
      //匹配404页面，该路由最好放在最末尾
      path:'*',
      component:NotFound
    }
  ]

  //路由实例化
  const router = new VueRouter({
    routes  //定义路由规则
  })

  let vm = new Vue({
    el:"#app",
    router  //挂载路由
  })

  /*
    hash路由
      根据 地址 的hash值得变化 来 切换不同组件
      window.addEvenetListener("hashchange",()=>{
        // 监听地址栏  hash值变化
      })
    */ 
</script>

监听动态路由参数变化以及匹配404页面和重定向

1. 监听动态路由参数变化

  //定义一个新闻详情子组件
  let NewsSon = {
    template:`
      <div>
        <h2>新闻详情</h2>  
      </div>
    `,
    mounted(){
      //在这里获取到动态路由传的参数，及:id
      console.log(this.$route.params.id);
    },
    watch:{
      //复用组件时，想对路由参数的变化作出响应的话，watch (监测变化) $route 对象：
      $route(to,from){
        console.log(to); //目标路由
        console.log(from); //上一个路由
      }
    }
  }

1. 匹配404页面和路由重定向

  let News = {
    template: `
        <div>
          <h1>
            新闻页
          </h1>  
        </div>
      `
  }

//匹配404页面
  let NotFound = {
    template:`
      <h1>404</h1>
    `
  }

  // 定义路由
  const routes = [
    {
      path:'/',
      //重定向到news页
      redirect:'/news'
    },
    {
      path:'/news',
      //命名路由即给路由定义个name
      name:'新闻',
      component:News
    },
    {
      path:'/news/:id',
      component:NewsSon
    },
    {
      path:'*',
      component:NotFound
    }
  ]

路由嵌套

重点：
- 1，二级路由的path 最好包含一级路由path
- 2，一定在要二级路由对于的一级路由模板中写出口 router-view
案例分析：

 <style>
    .router-link-active {
      background: cadetblue;
    }

    .router-link-exact-active {
      background: tan;
    }
  </style>
  <script src="./js/vue.js"></script>
  <script src="./js/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <router-link tag="button" to="/home">home页</router-link>
    <router-link tag="button" to="/news">新闻页</router-link>

    <!-- 出口 -->
    <router-view></router-view>
  </div>

  <template id="news"> 
    <div>
      <router-link to="/news/native">国内新闻</router-link>
      <router-link to="/news/abroad">国外新闻</router-link>
      <h1>
        我是news页
        <!-- 这里也需要路由的出口标签 -->
        <router-view></router-view>
      </h1>  
    </div>
  </template>
</body>
<script>

  //定义组件
  let Home = {
    template: `
      <div>
        <h1>
          我是home页  
        </h1>  
      </div>
    `
  }

  let News = {
    template: '#news'
  }

  //定义两个新闻子组件
  const NativeNews = {
    template:`
      <div>
        <h2>国内新闻展示</h2>  
      </div>
    `
  }

  const AbroadNews = {
    template:`
      <div>
        <h2>国外新闻展示</h2>  
      </div>
    `
  }


  //定义路由
  const routes = [
    {
      path:'/',
      //重定向到home页
      redirect:'/home'
    },
    {
      path:'/home',
      component:Home
    },
    {
      path:'/news',
      component:News,
      //新闻页里面有子路由
      children:[
        {
          path:'/news/native',
          component:NativeNews
        }, 
        {
          path:'/news/abroad',
          component:AbroadNews
        }
      ]
    },
  ]


  //路由实例化
  const router = new VueRouter({
    routes
  })


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