Table of contents
Second, the routing router in vue using steps
1. Routing jump with parameters:
2. Route jump without parameters
Official document address:
1. Routing function in vue
The main idea of vue is component-based development, and routing is used to configure the corresponding display path of components, such as
Second, the routing router in vue using steps
Create a routing file - use routing - configure the routing exit, so that the content of the routing configuration is displayed on the page
(1) Create routing files: general routing files are placed separately in the router folder
In the src directory, create a router folder, and in the folder, create index.js to create routes.
The router in vue needs to use two dependencies of vue and vue-router, please take a look at the code
(2) Use routing
[1] Introduce the routing file in main.js: import router from './router', pay attention not to change router to lowercase
[2] Register routing (because main.js is the main entry of the program, after registering in it, the program will automatically read the routing information when it runs), please see the following code
(3) Configure the routing exit so that the content of the components in the routing is displayed on the page
In App.vue, add <router-view></router-view> to display the content of the routing configuration component, the example is as follows
After the above configuration is complete, run the program.
After the above routing is configured, how to implement routing jump in the code?
3. Routing jump
1. Routing jump with parameters:
(Note that $router is used for routing jumps , and $route is used for routing parameters )
（1）this.$router.push() ：
Jump to the specified url path, and add a record to the history stack, click back to return to the previous page
[1] With parameters: the page passes parameters through path and query , ( the parameters will not be lost after refreshing the page , and the parameters passed by query will be displayed after the url in the address bar (/home?user=test), similar to a get request )
The target page gets parameters through this.$route.query
Example:
Jump to the route of path='/home' and pass the parameter selected=1:
this.$router.push({path: '/home', query: {selected: "2"}});
The target page gets the selected parameter:
this.$route.query.selected
[2] With parameters: the page passes parameters through path and params, name and path ( parameters will be lost after refreshing the page , url parameters are not displayed in the address, similar to post requests )
(1) In the route to the specified route name, pass parameters, that is, pass name and path
Jump to the route with name='register' and pass the parameter user=test user:
this.$router.push({name: 'register', params: {user: 'test user'}}); The
target page gets the user parameter value:
this.$route.params.user
Example:
Find the name='register' route in the router file:
Take parameters in src/view/register/ index.vue
(2) Pass parameters to the specified routing address, that is, pass parameters through path and params
Pass parameter: this.$router.push({path: '/register', params: {user: 'test user'}});
Access: $router.params.user
（2）this.$router.replace() ：
The use of this.$router.replace is basically the same as this.$router.push, except that this.$router.replace does not add records to the history, but replaces the records of the history, which cannot be returned through the return function of the browser. The previous page is generally used when logging out of the system
Note: The push method can also pass replace this.$router.push({path: '/homo', replace: true})
Summarize:
The difference between params and query delivery methods is: the query parameter can be seen in the address bar and can be obtained, similar to a get request; the params parameter cannot be seen in the address bar, and the parameter can only be obtained by entering it for the first time. After refreshing the page, Parameters will be lost, similar to post requests.
The difference between push and replace : the push address is stored in the history stack, and there is a historical address record. You can return to the previous step through this.$router.go(n); replace directly replaces the current page address without historical address records.
2. Route jump without parameters
-
this.$router.push('/home')
-
this.$router.push({name: 'home'});
-
this.$router.push({path: '/home'});
3、this.$router.go(n)
Jump forward or backward n pages, n can be a positive or negative integer, generally use this.$router.go(-1) to return to the previous page
4. Label Routing
<router-link to='The path of the page that needs to be jumped to></router-link>
When the browser parses, it parses it into a tag similar to < a >
5. Routing element:
Routing element, through the meat attribute, can attach any information to the route, can determine who can access the route and control whether to access the component.
Format: meta:{
Variable name 1: variable value,
Variable name 2: variable value,
}
Scenario: For example, in front-end development, custom footer components do not want to be displayed on the registration page, but displayed on the home page, which can be achieved by setting meta.
[1] Add a meta attribute to the router/index.js routing file, customize the name showfooter to distinguish whether to display, and realize: when opening the /home home page, the footer is displayed; when opening the /register registration page, the footer is not displayed
[2] Modify the footer component in App.vue, add the v-show attribute, and control the display and hiding of the Footer component through meta.showfooter in the routing configuration. v-show="true" display, v-show="false" hide
6. The pits used by routing
The installation route depends on npm install --save vue-router. After this installation, it is easy to appear export 'default' (imported as 'VueRouter') was not found in 'vue-router' warning, causing the route to fail. This is because npm install --save vue-router The latest version of routing is installed by default. Open the package.json file in the root directory and check the vue-router version in dependencies. If it is the latest version 4.xx, reinstall version 3 before testing , it can be run.
Reinstall version 3: npm install --save [email protected]
