1.创建项目 vue create vueRouterMode
2.选择自己的配置
3.安装vue-router : cnpm install vue-router --dev
4.在 src 目录新建router文件夹,再新建 index.js
5.在index.js 中编辑:
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
const Index = ()=> import("../views/Index.vue")
const Blog = ()=> import("../views/Blog.vue")
const Photo = ()=> import("../views/Photo.vue")
const routes=[
{
path:"/",
name:"Index",
redirect:Index
},
{
path:"/blog",
name:"Blog",
component:Blog
},
{
path:"/photo",
name:"Photo",
component:Photo
},
]
const router = new VueRouter({
mode:"history",
routes
})
export default router
6.在main.js 中导入 import router from "./router/index"
import Vue from 'vue'
import App from './App.vue'
import router from "./router/index"
Vue.config.productionTip = false
const app= new Vue({
router,
render: h => h(App),
}).$mount('#app')
console.log(app,"app");
7. 在App.vue 中
<template>
<div id="app">
<router-link to="/">index</router-link>
<router-link to="/blog">blog</router-link>
<router-link to="/photo">photo</router-link>
<router-view />
</div>
</template>
8. 运行 cnpm run serve,结果是ok,没有问题
看打印的app,观察$route和$router
$route 是属于object 类型, 存储了当前页面数据或者规则,有路径或者路径传递参数
$router 是属于VueRouter实例,提供一些相关的方法
路由动态传值两种方式:
个人推荐第二种方式;
嵌套路由: children,类似这种
{
path:"/",
name:"Home",
component:Home
children:[
{
path:"find",
name:"Find",
component:Find
},
{
path:"message",
name:"Message",
component:Message
}
]
},
编程式导航:
this.$router.replace("/home")
this.$router.push("/home")或者this.$router.push({name:"Home"})
replace 对比 push ,区别:
replace: 跳转其他页面,没有记住历史
push : 记住历史,浏览器返回键可以返回
this.$router.go(-2) 返回前2次路径
Router 模式: hash 和 history
默认模式: mode="hash"
外观显示形式:如
hash模式:https://yuqi.com/#/yuqi?id=150 (无效网站)
history模式:https://yuqi.com/yuqi/150 (无效网站)
原理区别:
hash是基于锚点,以及onhashchange 事件
history 是基于 html5 中的 History Api
history.pushState() 事件 ie 10以后才支持(2022年没有ie)
history.reqlaceState()
这个两个事件都是记录浏览器历史