Vue-Router基本使用
2021-11-06 本文已影响0人
Alse
一、基本使用
1、安装命令:
npm install vue-router
2、配置
新建router配置文件 src/router/index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../components/Home'
import About from '../components/About'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about/:id',
component:About
},
{
name:'home', // 命名路由
path:'/home',
component:Home
}
]
})
在main.js中引用
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
el:"#app",
render: h => h(App),
router
})
创建要被路由的组件
<template>
<h2>Home组件的内容</h2>
</template>
<script>
export default {
// 注意此处一定要配置name
name:'Home'
}
</script>
3、使用
声明式路由跳转
<router-link to="/home">Home</router-link>
编程式路由跳转
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由,使用这样的传参一定要命名路由,参数不在url中显示
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
路由展示占位
<router-view></router-view>
二、路由传参
1、RestFul风格
路由配置
{
// 后面的id为准备接受的参数
path:'/about/:id',
component:About
}
参数传递
// 声明式,跳转至about时,参数id为1,url:/about/1
<router-link to="/about/1">Home</router-link>
// 编程式
this.$router.push({ path:'/about/2' })
参数接收
this.$route.params.id
2、Params传参,需要是命名路由,Url中不会展示参数,刷新后参数失效
路由配置
{
name:'home', // 命名路由
path:'/home',
component:Home
}
参数传递
// 声明式
<router-link :to="{name:'home',params:{id:4}}">home</router-link>
// 编程式
this.$router.push({
name:'home',
params: {
id: 3
}
})
参数接收
this.$route.params.id
3、query来传递参数,参数会跟在Url后面,类似get请求 /about?id=,刷新参数不会丢失
路由配置
{
path: '/about',
component: About
},
参数传递
// 声明式
<router-link :to="{path:'/about', query: {id: 5}}">About</router-link>
// 编程式
this.$router.push({
path:'/about',
query: {
id: 6
}
})
参数接收,注意这里是 query
this.$route.query.id