Vue Learning Notes 14, page jump

First, the effect:

 

 

Second, project structure screenshot

 

 

Third, code

index.js

IMPORT {Creater, CreateWebhistory} from 'Vue-router'Import home from' ../views/home.Vue'// Routing configuration group // PAHT: Routing Road must be / start must be filled / / Component: The corresponding routing component must be filled // name: the name of the route const routes = [{pat: '/', name: 'home ", component: home}, {path:' / about ', name:' About ', // In need to introduce // If there is no access / about does not load this component save performance component: () => import (' ../views/about.vue ')}] // Create Routing Object Const Router = Createrouter ({// CreateWebhashhistory Hash mode path will be more than one # 号 History: CreateWebhistory (Process.env.base_URL), Routes}) Export Default Router

 

About.vue

<Template> <div class = "about"> <h1> This is About Page </ h1> <button @ click = "back"> Back to home </ button> </ div> </ template> <script > import {definecomponent} from 'Vue' Import {Userouter} from 'Vue-Router' Export Default DefineComponent ({Name: 'About', setup () {letry = userouter () {letry = userouter () let back = () => {//// It's all back to the last step router.back () //router.go( 1)} Return {back}}} </ script>

 

Home.vue

<Template> <Div> <Button @ Click = "Goto"> Jump Routing </ button> </ div> </ template> <script> import {definecomponent, computed, ref} from 'Vue'Import {USESTORE } from 'Vuex'Import {Userouter, useroute} from' Vue-Router'Export Default DefineComponent ({name: 'Home ", components: {}, setup () {} is the global routing object Let Router = userouter () Console.log (Router) Let goto = () => {// Jump route / / Push function can be directly passed to the path // back: Previous page // forward: Next // Go ( Integer) Integer Representative Advance Negative Representative Rear Head //About ') Router.push ({Path:' / About '})} Return {goto}}} </ script> <style scoped lang = " SCSS "> </ stop>