Vue Router应用方法详解

目录

• 服务端路由
• 路由的应用场景
• 路由
• 监听浏览器 hashchange 事件实现路由
• 使用Vue Router+Vue2实现路由

服务端路由

服务端路由时指的是服务器根据用户访问的 URL 路径返回不同的响应结果。

在传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML页面，然后重新加载整个页面。

然而，在单页面应用中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，无需重新加载的情况下更新当前页面。

这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。

在这类单页应用中，“路由”是在客户端执行的。一个客户端路由器的职责就是利用诸如 History API 或是 hashchange 事件这样的浏览器 API 来管理应用当前应该渲染的视图。

路由的应用场景

单页面应用（SPA应用）：

1. 顾名思义导航栏不变，内容栏改变的应用。
2. 内容栏根据导航栏的选择变化的同时，页面不会跳转，也就是说不会产生新的请求。
3. js拦截页面的跳转请求，动态的获取新的数据，路径也会随之变化。
4. 数据需要通过ajax的请求获取。

路由

1. 路由就是多个key-value的对应关系。
2. 每一个路由都需要路由器的支持。

监听浏览器 hashchange 事件实现路由

如果你只需要一个简单的页面路由，而不想为此引入一整个路由库，你可以通过动态组件的方式，监听浏览器 hashchange 事件或使用 History API 来更新当前组件。

<script>
import About from "./components/About.vue";
import Home from "./components/Home.vue";
import NotFound from "./components/Not Found.vue";
const routes = {
  //路由默认跳转到Home组件
  '/': Home,
  '/about': About
}
export default {
  data() {
    return {
      currentPath: window.location.hash
    }
  },
  computed: {
    //计算属性的方法，响应式的，缓存
    currentView() {
      //过滤#，匹配路由
      return routes[this.currentPath.slice(1) || '/' ] || NotFound
    }
  },
  mounted() {
    window.addEventListener('hashchange', () => {
      //只要window变化了就，把当前的路径给App组件下的属性this.currentPath
      this.currentPath = window.location.hash
    })
  }
}
</script>
<template>
  <a href="#/" rel="external nofollow" >Home</a> |
  <a href="#/about" rel="external nofollow" >About</a> |
  <a href="#/non-existent-path" rel="external nofollow" >Broken Link</a>
  <br>
  <component :is="currentView" />
</template>

使用Vue Router+Vue2实现路由

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。

1.安装路由

npm i vue-router@3

注意：

1. vue3对应的vue-router版本是4
2. vue2对应的vue-router版本是3
3. 我这里是vue2

2.导入VueRouter插件(main.js)

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
import './assets/main.css'
//关闭vue的生产提示
Vue.config.productionTip = false
//使用路由器插件
Vue.use(VueRouter)
new Vue({
  render: (h) => h(App),
}).$mount('#app')

3.编写创建路由器router（并暴露）的js文件（router/index.js）

import VueRouter from "vue-router";
import Home from "../components/Home";
import About from "../components/About";
import NotFound from "../components/Not Found";
//创建路由器并暴露
export default new VueRouter({
    //多个路由
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/Home',
            component:Home
        }
    ]
})

4.引入router（main.js）

import router from "./router";
new Vue({
  render: (h) => h(App),
  router:router
}).$mount('#app')

5. 测试

<template>
<div>
  <h1>Router Demo</h1>
  <router-link to="/home">Home</router-link>||
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</div>
</template>

Vue3 + Vue-router

到此这篇关于Vue Router应用方法详解的文章就介绍到这了,更多相关Vue Router内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！