Vue-router是Vue的官方路由。
安装:
yarn install vue-router //下载
在src目录下会出现一个router文件
第一步:在index中引入
import Router from 'vue-router'
//因为vue-router是一个插件 所以需要Vue.use(Rouer)
Vue.use(Rouer)
第二步:创建路由实例,配置路由信息
const routes = []
const route = new VueRouter({
routes
})
第三步:将vue-router实例对下那个导出
export default router
第四步:在Vue实例中挂载创建的路由实例,然后在Vue实例中引入
import router from './router'
new Vue({
el:'#app',
router,
render:h=>h(App)
})
vue中单页面路由跳转其实就是组件切换
我们创建两个组件然后配置路由
先在router/index.js中引入两个组件
import Home from '..//components/Home';
import About from '..//components/About';
然后指定路由路径和组件
const routes =[
{
path:"/home",
component:Home
},{
path:"/about",
component:About
}
]
接下来使用路由就可以实现页面跳转了
<template>
<div id="app">
<!-- 定义两个路由链接 -->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<!-- 展示组件内容 -->
</router-view>
</template>
修改静态路由的模式为history
我们之前都是采用hash的方式来静态路由跳转的, 但hash方式有一个缺点, 即带有#
例如:我们跳转都Home页, 他的路径是
http://localhost:8080/#/home
带有一个#, 这不符合我们通常路径的使用方法,所以,我们可以考虑将其替换为history的模式。 如何替换呢? 在router/index.js文件中
const router = new Router({
// 这里配置的是路由和组件的映射关系, 是一个数组.
routes,
mode: "history"
})
这样就把路由模式改成history了
如果是普通的按钮点击事件实现页面跳转
<template>
<div id="app">
<!-- 定义两个路由链接 -->
<button @click="clickHome">首页</button>
<button @click="clickAbout">关于</button>
<!-- 展示组件内容 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
methods:{
clickHome() {
this.$router.push("/home")
console.log("点击home按钮")
},
clickAbout() {
this.$router.push("/about")
console.log("点击about按钮")
}
}
}
</script>
动态路由:动态路由就是url不是固定的,比如查看某个用户的个人界面
import User from "../components/User"
const routes = [
{
path: "/user/:userId",
component: User
}
]
这里path使用了:userId占位,表示这里有一个占位符,将被真实的userId所替代,后面在路由传递的时候变量需要和这里保持一致
<template>
<div>
<h2>用户界面</h2>
<div>欢迎{{userId}},来到用户界面</div>
</div>
</template>
<script>
export default {
name: "User",
data(){
return {
userId:this.$route.params.userId
}
}
}
</script>
这样可以获取到路由上传来的userId,我们可以通过this.$route.params来获取参数。
嵌套路由(子路由):
/admin 主页面
/admin/create 创建新信息
/admin/edit 编辑信息
创建子路由的方法就是在原有路由的配置中加children:[]
const routes = [
{
path:'/admin',
component:Admin,
children:[
{
path:'/create',
component:Create
},
{
path:'/edit',
component:Edit
}
]
}
]
路由跳转的几种方式
方式一:path路径跳转
缺点:不能传引用数据类型-数组,对象等。
//写法1
<router-link to="/admin">跳转</router-link>
//router-link解析出来的其实是a标签
//写法2
<router-link :to="path1">跳转</router-link>
...
data(){
return{
path1:"/admin"
}
}
方式二:命名式路由跳转
优点:可以传引用数据类型
<router-link :to="{name:'admin',query:{city:cityObj}}"购物车</router-link>
...
//路由配置
{
path:'/admin',
//该path路径不能少,因为命名式路由跳转是通过name找到路径的
name:'admin',
component:Admin
}
方式三:编程式路由
优点:可以传引用数据类型
jumpHome() {
this.$router.push({
path:"/home",
query:{
id:this.id
}
})
}
...
//接收值如果进入另一个页面,一般在created中接收
this.$route.query.id
//路由配置
{ path: "/home", component: ()=>import("../Home") }
//或者name和params搭配,接收值 this.$route.params.id
路由传值:
query查询参数传值
1.1 router-link的to属性或者js方式push方法里的参数由字符串更换成对象, 需要切换的路由由path字段负责, 传递的值由query字段负责
1.2 query方式传递的值会以键值对的形式拼接到网址的后面, 与get请求传递数据的格式类似
1.3 query方式传递的值, 刷新页面, 值不会消失
1.4 query方式传值, 不需要去配置routes数组里的对应对象
params路径参数传值
2.1 router-link的to属性或者js方式push方法里的参数由字符串更换成对象, 需要切换的路由由name字段负责, 传递的值由params字段负责
2.2 params方式传递的值会以路径的形式拼接到网址的后面
2.3 params方式传递的值, 刷新页面, 值会丢失
2.4 params方式传值, 需要去配置routes数组里的对应对象, 需要给对象多加一个name字段, 还需要将path字段修改成 “/路由/:值1/:值2/:…”
<router-link :to="{name:'home', params: {id:1}}"></router-link>
<router-lin :to = "'user/'+userId"></router-link> //通过this.$route.params.userId获取这个id
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
路由规则配置属性有哪些,分别有什么作用