回顾Vue-Router相关用法,route和router区别,路由动态传值,跳转方式,hash和history

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()
这个两个事件都是记录浏览器历史