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
In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress. 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
Principles, Technologies, and Methods of Geographic Information Systems
102