vue学习之router

1.前端路由的概念

2.实现原理

2.1hash

• url的hash也就是锚点#，本质上使改变window.location的href属性
• 我们可以通过改变页面的hash，设置loacation.hash='foo',不会使页面刷新

2.2history.pushState({},"",‘home’)

• 页面可以返回，并进行history.back()/等同于history.go(-1)方法；
• 页面也可前进，history.forward()/等同于history.go(1)方法；

2.3history.replaceState({},"",‘home’)

• 实质上页面是进行的替换，不可以返回

3.实现

3.1. 引入路径

cli4中放在view文件中，修改下路径即可

import Vue from 'vue'
import Home from '../components/Home';
import About  from '../components/About';

3.2. 配置路由相关信息

3.2.1导入路由

import VueRouter from "vue-router";

3.3使用

3.3.1通过Vue.use(插件)，安装插件

Vue.use(VueRouter);

3.3.2创建路由对象

3.3.2.1创建路径与组件的对应关系，即配置映射关系

const routes=[
  {
   
    path:'/home',
    component:Home
  },
  {
   
    path:'/about',
    component:About
  }
];
const router = new VueRouter({
   
  routes
})

3.3.2.2将router对象传入到vue实例中

 export default router;

注：练习时忘记将router实例导出，导致页面报错 Error in render: “TypeError: Cannot read property ‘resolve’ of undefined”，导出后无误

使用

在app.vue添加

<router-link to="/home">Home</router-link> |
<router-link to="/about">About</router-link>
<router-view></router-view>

4. 设置默认路径

const routes=[
  {
   
    path:'',
    //重定向
    redirect:'/home'
  }
]

5. 修改跳转模式

默认为hash方式跳转，跳转方式会有#号

const router = new VueRouter({
   
  routes,
  mode:'history'
})

6. router-link属性

6.1tag

可以设置tag=‘button’，修改渲染标签，默认为a

6.2repalce

设置replace属性，会开启history方法跳转

6.3修改class

router-link标签内添加 active-class=‘cls’&#x