一:注意:在 Vue 实例中,你可以通过 $router
访问路由实例。因此你可以调用 this.$router.push("路由地址")来跳转到目标路由页面;
想要导航到不同的 URL,可以使用 router.push
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。
当你点击 <router-link>
时,内部会调用这个方法,所以点击 <router-link :to="...">
相当于调用 router.push(...)
:
所以在vue中的跳转分为
1.编程式导航(router.push(...))
2.声明式导航(<router-link :to="...">)
二:路由的具体使用流程:
1.在项目里面下载自己需要的路由版本,或者在创建项目的时候选择路由选项
yarn add vue-router@4
npm install vue-router@4
2.在项目里面创建一个router文件夹,里面创建一个router.js文件
3.router.js里面的内容
import Router from "vue-router"; //引入vue-router文件
import Vue from "vue" //引入vue文件
import Hellow from "../components/Hellow.vue"; //引入需要跳转的组件Hellow
import Hi from "../components/Hi.vue"; //引入需要跳转的组件Hi
import sonOne from "../components/children/son1.vue"; 引入需要跳转的组件sonOne
Vue.use(Router) //挂载router
const routes = [{
//默认显示的首页
path: "/",
//路由重指向,指向hellow页面
redirect: "/hellow"
}, {
path: '/hellow', //一级路由路径前面加上"/"
name: "hellow",
component: Hellow //组件名字要和引入组件放入名字一样
}, {
path: "/Hi",
name: "hi",
component: Hi,
//嵌套路由,儿子路由(注意儿子路由前面不要写"/",要不就是一级路由了)
children: [{ //声明孩子路由需要用children
path: "sonOne",
name: "sonOne",
component: sonOne
}]
}]
const router = new Router({ routes }) //创建一个实例
export default router //导出实例
4.在main.js里面
import Vue from 'vue'
import App from './App.vue'
import router from "./router/router"; //引入router.js文件
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router //挂载在vue实例上
}).$mount('#app')
5.在vue.app文件里面或者目标文件里面
<template>
<div id="app">
<van-button type="info" @click="wap">点击跳转HI</van-button>
<!-- loaction跳转地址栏刷新 -->
<van-button type="info" onclick="location='/'">点击跳转Hellow</van-button>
<!-- 用router-link进行跳转,地址栏不需要刷新 -->
<!-- <div class="vbutton"><router-link to="/hellow">点击跳转</router-link></div> -->
<!--router-view 路由显示-->
<router-view></router-view>
</div>
</template>
<script>
import { Button } from 'vant'
export default {
name: 'App',
methods: {
wap() {
//路由跳转,hi这个是一级路由跳一级路由,比如跳二级路由的话路径是('/hi/son')
this.$router.push('/hi')
},
},
components: {
[Button.name]: Button,
},
}
</script>
6.路由传参
<template>
<div>
<button @click="goto">点击去son1query</button>
<button @click="go">点击去son1params</button>
<!--俗称问号传参,在目标页面用this.$route.query.参数 获取参数-->
<router-link to="/hi/sonOne?nameid=232425&name=张三">点击</router-link>
<br />
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'DemoHi',
mounted() {},
methods: {
goto() {
//使用 query查询参数的时候在页面使用path引入
this.$router.push({ path: '/hi/sonOne', query: { useId: '123456' } })
},
go() {
//使用params查询参数的时候在页面使用name引入,在router.js里面配置的路由的name
this.$router.push({ name: 'sonOne', params: { useID: 789 } })
},
},
}
</script>
7.目标页面的接受参数
<template>
<div>
<h3>{{ID}}</h3>
</div>
</template>
<script>
export default {
name: 'DemoSon1',
data() {
return {
ID: '我是Hi传过来的参数',
}
},
mounted() {},
//页面初始化后
created() {
//获取query传参,另外注意是!!! this.$route不是this.$router !!!
const q = this.$route.query.useId
// 获取params传参
const IDD = this.$route.params.useID
//这个是获取html里面的router-link里面的 ?后面传的参数
const name = this.$route.query.name
const nameid = this.$route.query.nameid
},
}
</script>
8.暂时常用的就这么多,别的暂时想不起来。另外我自己练的小练习的地址(可以克隆下来)http://git@gitee.com:xuexudong/routing-details.git
欢迎大佬们评价补充