<>1. brief introduction
Due to the use of vue Front end of development , But only through vue Provided vue-router Jump to the page , The development tool used here is HBuilderX
<>2. preparation
1. use first vue-cli Create a vue project
2. Import the current project into HBuilderX in
3. Use the command line to vue Add to project vue-router Our support , After completion package.json：
<>3. Create different components
<>4. Import vue-router, And add components and routing rules
1. Import vue-router
2. Modify the current main.js And add components Components in components
3. In the current main.js Define routing rules in , This rule is used to access different components
4. Import routing rules
<>5. Display using routing ( This view is used to display different components )
1. stay App.vue Add content to
2. Current router-view Tags are mainly used to output the component content accessed
<router-view></router-view>
<>6. Realize jump
1. Use routing in the current component , stay script Import from axios
2. Jump rules used :this.$router.push( route ); The path lies in main.js Defined in
this.$router.push("/User");// This means to go User Here and get User This component is displayed in the App.vue Specified route in view In the label of
The results are not shown here
<>7. summary
1. establish vue You need to pay attention to the use of native vue-cli Create project
2. You need to add various plug-ins , Add a plug-in to it using the command line
3. Pay attention to the problem of current user permissions
4. When using components, you need to use the main.js Used in import Component name from The location of the current component , use Vue.use(VueRouter) Using components
5. Routing rules need to be defined , And in the current Vue Used in
6. adopt this.$router.push Jump the path
Technology