Creating a single-page application with Vue.js + Vue-router is very simple. With Vue.js, we've assembled the components into an application, and when you're adding vue-router, you just need to configure the components and route mappings, and then tell Vue-router where to render them.
The use of a vue-routerOne, in the HTML code, we write a simple example. The versions of Vue.js and Vue-router here are all 2. If the Vue version does not correspond, it will not take effect.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <Scripttype= "Text/javascript"src=".. /vue.js "></Script> <Scripttype= "Text/javascript"src=".. /vue-router.js "></Script></Head><Body> <DivID= "App"> <H1>Hello app!</H1> <P> <Router-link to= "/foo">Go to Foo</Router-link> <Router-link to= "/bar">Go to Bar</Router-link> </P> <Router-view></Router-view> </Div> <Scripttype= "Text/javascript"src= "Js/vue7.js"></Script></Body></HTML>
Second, the code in JS is as follows:
//0. If you are programming with a modular mechanism, call Vue.use (Vuerouter)//1. Define (route) components. //import from other files can be enteredConst FOO = {Template: ' <div>foo</div> '}const Bar= {Template: ' <div>bar</div> ' }//2. Defining Routes//each route should map a component. Where "component" can be//the Component Builder created by Vue.extend (),//or, just a component configuration object. //We'll talk about the nesting routine later. Const ROUTES =[{path:'/foo ', Component:foo}, {path:'/bar ', Component:bar}]//3. Create a router instance and pass ' routes ' configuration//you can also pass other configuration parameters, but first it's so simple. Const ROUTER =NewVuerouter ({routes//(abbreviation) equivalent to Routes:routes})//4. Create and mount the root instance. //remember to inject the route through the router configuration parameter,//So that the entire application has a routing functionConst APP =NewVue ({router}). $mount (' #app ')//now, the app has started!
Third, the effect of the operation is as follows: when the <router-link> corresponding route matches successfully, the Class property value is set automatically .router-link-active .
To define a nested route, the HTML code does not change. JS inside Add the following code:
Const PERSON = { ' <div class= ' user ' >= { ' <div style= ' color:red; >my name is huhx.</div> '}To increase the mapping of routes, the code is as follows:
Const ROUTES = [{ '/foo ', Component:foo}, { '/bar ', Component:bar}, { '/user/:id ', Component:user}, { '/person/:id ', Component:person, Children : [ { ' huhx ', component:huhx } ]}]The effect of the operation is as follows:
Simulate how the route worksFirst, the main page of the code huhx3.html content as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <Scripttype= "Text/javascript"src=".. /jquery-3.1.0.js "></Script> <Scripttype= "Text/javascript"src= "Js/app3.js"></Script></Head><Body> <ul> <Li><ahref="#/">Home</a></Li> <Li><ahref= "#/product">Products</a></Li> <Li><ahref= "#/server">Service</a></Li> </ul><DivID= "Content"></Div> </Body></HTML>
The two fragments pages included in the test are as follows:
<style= "color:red">Hello World</Div >
<style= "Background-color: #CCCCCC; text-shadow:2px 2px 4px Red">I Love you. </ Div >
The code for JS is as follows: App3.js
functionload () {varURL =window.location.href; //Get the Router varindex = Url.indexof ("#"); varROUTEURL =url.substring (index, url.length); Alert ("ROUTEURL:" +ROUTEURL); //comparing router objects, loading pages if(RouteUrl = = "#/server") { $("#content"). Load ("page.html")); } Else if(RouteUrl = = "#/product") { $("#content"). Load ("product.html")); } Else { $("#content"). Load ("<span>huhx</span>"); }}window.addeventlistener (' Hashchange ',function() {load ();},false);
Second, the operation effect is as follows: Notice that the URL clicked two times, and did not trigger the Hashchange event. Let's talk about this event to understand the drawbacks of this implementation.
For more information on routing, please refer to the blog: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history
Friendship LinkThe use of VUE Foundation---->vue-router (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
