服务端路由
服务端路由时指的是服务器根据用户访问的 URL 路径返回不同的响应结果。
在传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML页面，然后重新加载整个页面。
然而，在单页面应用中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，无需重新加载的情况下更新当前页面。
这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。
在这类单页应用中，“路由”是在客户端执行的。一个客户端路由器的职责就是利用诸如 History API 或是 hashchange 事件这样的浏览器 API 来管理应用当前应该渲染的视图。
路由的应用场景
单页面应用（SPA应用）：
- 顾名思义导航栏不变，内容栏改变的应用。
- 内容栏根据导航栏的选择变化的同时，页面不会跳转，也就是说不会产生新的请求。
- js拦截页面的跳转请求，动态的获取新的数据，路径也会随之变化。
- 数据需要通过ajax的请求获取。
路由
- 路由就是多个key-value的对应关系。
- 每一个路由都需要路由器的支持。
监听浏览器 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
注意：
- vue3对应的vue-router版本是4
- vue2对应的vue-router版本是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内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！