015-使用vue-router跳转路由案例

使用vue-router跳转路由案例

需求

通过vue-router路由功能, 设置根页面为Start.vue, 该页面有一个按钮, 点击该按钮, 通过路由功能跳转至Home.vue. Home.vue页面有一个按钮, 点击该按钮可以返回到上一页

文件结构

src/

router/

index.js

views/

Start.vue

Home.vue

// @/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

import Start from '../views/Start.vue'

import Home from '../views/Home.vue'

const routes = [

{

path: '/',

name: 'Start',

component: Start

},

{

path: '/home',

name: 'Home',

component: Home

}

]

const router = createRouter({

history: createWebHistory(process.env.BASE_URL),

routes

})

export default router

// @/App.vue

<template>

<div>

<!-- 注意, 如果使用路由, 那么在必须添加<router-view/>标签 -->

<router-view/>

</div>

</template>

// @/views/Start.vue

<template>

<div>

<div>Start.vue</div>

<button @click="goHome">开始任务</button>

</div>

</template>

<script>

import { defineComponent } from 'vue'

import { useRoter } from 'vue-router'

export default defineCompoment({

name: 'example',

setup(){

//引入全局路由 router对象

let router = useRouter()

let goHome = () => {

//也可以通过传入对象的方式使用push方法, 效果相同

//router.push({

//    path: '/home'

//})

router.push('/home')

}

return{

goHome

}

}

})

</script>

// @/views/Home.vue

<template>

<div>

<div>Home.vue</div>

<button @click="goBack">回到上一页</button>

</div>

</template>

<script>

import { defineComponent } from 'vue'

import { useRoter } from 'vue-router'

export default defineCompoment({

name: 'example',

setup(){

//引入router对象

let router = useRouter()

let goBack = () => {

//go() 根据传入跳转, 如果为负数, 则跳转到前N页面. 如果为正数, 则跳转到后N页

//back() 回到上一页, 和go(-1) 等价

router.back()

//forward() 下一页, 和go(1) 等价

}

return{

goBack

}

}

})

</script>