最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
In this chapter, we will introduce you to Vue routing.
Vue routing allows us to access different content through different URL.
Multi-view single-page Web application (single page web application,SPA) can be realized through Vue.
Vue.js routing needs to be loaded vue-router library
Chinese document address: vue-router document . NPM Taobao image is recommended: Vue.js + vue-router can easily implement a single page application. In the following example, we will <-- \`to\` a by link-- specify to transmitting> Note that instead of using the regular a tag, we use a custom component All navigation links clicked will be styled. Next we can learn more about A link that represents the destination route. When clicked, the interior will immediately put Set up Set up Sometimes I want Sets the CSS class name to use when the link is activated. It can be replaced by the following code.
Pay attention Configuration that should be activated when the link is exactly matched
Declare events that can be used to trigger navigation. It can be a string oran array containing strings. The above code sets the 2.17.1. Installation ¶
1.Download / CDN directly ¶
https://unpkg.com/vue-router@4
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4
2.17.2. Simple example ¶
to property is the destination address, that is, what you want to display. vue-router add in, then configure components and route maps, and then tell vue-router where to render them. The code is as follows:HTML code ¶
Hello
App!
2.17.3. Router-link ¶
router-link to create a link. This allows Vue Router to change URL and handle URL generation and coding without reloading the page. We will see later how to benefit from these features. 2.17.4. Router-view ¶
router-view will be displayed with the url the corresponding component. You can put it anywhere to suit your layout. 2.17.5. JavaScript code ¶
// 1. Define routing components
// It can also be imported from other files
const Home = { template: ' Home' }
const About = { template: 'About' }
// 2. Define some routes
// Each route needs to be mapped to a component.
// We will discuss nested routing later.
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
// 3. Create a routing instance and pass the 'routes' configuration
// You can enter more configurations here, but we are here
// Keep it simple for now
const router = VueRouter.createRouter({
// 4. Internally, the implementation of the history pattern is provided. For simplicity, we will use the hash mode here.
history: VueRouter.createWebHashHistory(),
routes, // Abbreviations for `routes: routes`
})
// 5. Create and mount root instances
const app = Vue.createApp({})
//Ensure that the _use_ routing instance enables
//The entire application supports routing.
app.use(router)
app.mount('#app')
// Now, the application has started!
class ="router-link-exact-active router-link-active" . 2.17.6.
2.17.7.
to ¶ to the value of the router.push() , so this value can be a string or an object that describes the target location
2.17.8.
replace ¶ replace property, when clicked, calls the router.replace() instead of router.push() will not stay after navigation history record. <router-link :to="{ path: '/abc'}" replace>router-link>
2.17.9.
append ¶ append property, its path is added before the current (relative)path. For example, we start from /a navigate to a relative path b if there is no configuration append , the path is /b if it is matched, otherwise /a/b . <router-link :to="{ path: 'relative/path'}" append>router-link>
2.17.10.
tag ¶ . So we use tag the prop class specifies what kind of label, and it also listens for clicks and triggers navigation. 2.17.11.
active-class ¶
class use active-class="_active" . 2.17.12.
exact-active-class ¶ class . It can be replaced by the following code. 2.17.13.
event ¶ <router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1router-link>
event for mouseover and the HTML content that you navigate when you move the mouse over Router Link 1