一:什么是路由:
根据用户请求的路径返回不同的页面或者数据
二:路由分为前端和后端路由
前端路由:
1、前端路由在进行页面切换的时候不会进行刷新
2、前端路由一般情况下都是用来做单页面(SPA)开发的
3、前端路由用户地址栏的路径发生改变的时候是不会经过后端的
4、前端路由会分为hash路由(带#号的路由,底层原理onhashChange) 和 history路由(H5的API)
后端路由:Node中 编写接口
三:使用:
1、安装
cnpm install vue-router -S
2、创建router文件夹 index.js
3、常用的配置项
mode:路由的形式
1、hash路由 带#的路由 默认是hash路 不需要后端的配置
2、history路由 不带#的路由 需要后端的配置
routes:每一个路由的配置项,routes是一个数组,数组中的每一个对象就代表一个路由的配置项
path:用户请求的地址路径
component:当路径匹配成功后需要渲染的组件
children:路由嵌套 chidlren就相当于一个小型的routes 当一级路由中用到了路由切换的时候就需要用到路由嵌套了
redirect:重定向
name:路由名称,
props:路由解耦
meta:路由的元信息 作用:携带当前路由特有的一些属性
import Vue from "vue" import VueRouter from "vue-router"; import Movie from "../components/movie" import Cinema from "../components/cinema" import Mine from "../components/mine"; import HotMovie from "../components/hotmovie" import CommingMovie from "../components/commingmovie" import NotFound from "../components/NotFound" import Detail from "../components/detail" import Login from "../components/login" import MineTwo from "../components/mineTwo" Vue.use(VueRouter); //路由的配置 const router = new VueRouter({ mode:"hash", routes:[ { path:"/", redirect:"/movie" }, //一个对象代表一个路由的配置项 { name:"movie", meta:{ title:"电影", flag:true }, path:"/movie",//匹配用户请求的地址 component:Movie,//当路径匹配成功后显示对于的组件 // /movie/hotmovie children:[ { name:"hotmovie", path:"hotmovie", component:HotMovie }, { name:"commingmovie", path:"commingmovie", component:CommingMovie } ] }, { path:"/cinema",//匹配用户请求的地址 meta:{ title:"影院", flag:true }, component:Cinema//当路径匹配成功后显示对于的组件 }, { path:"/mine",//匹配用户请求的地址 meta:{ title:"我的", flag:false }, children:[ { path:"mineTwo/:id/:name", component:MineTwo } ], component:Mine//当路径匹配成功后显示对于的组件 }, { name:"detail", meta:{ title:"详情", flag:false }, //path:'/detail/:id/:name', path:"/detail", component:Detail, //props:true }, { path:"/login", component:Login }, { path:"**", component:NotFound } ] }) export default router;
4、路由的内置组件
router-view:当用户请求的路径与path匹配成功后渲染component的组件
<template> <div id="app"> <router-view></router-view>//在此渲染组件 </div> </template> <script> export default { name:"App", created() { console.log(this) }, }; </script>
4、路由的内置组件
router-view:当用户请求的路径与path匹配成功后渲染component的组件
router-link:路由跳转的方式
属性:
to:跳转的地址
tag:可以将router-link渲染成某个标签
<template> <div id="footer"> <ul> <router-link :to="item.path" v-for="(item,index) in tabs" :key="index" tag="li" > <i class="iconfont" v-html="item.icon"></i> <span>{{item.text}}</span> </router-link> </ul> </div> </template>
5、路由跳转的方式有哪些?
1、a标签
2、router-link
3、编程式导航
编程式导航
简单来:用JS来实现路由的跳转
this.$router.push
this.$router.replace
this.$router.go
this.$router.back
this.$router.forward
<button @click="handleForward()">前进</button> <button @click="handleReplace()">替换</button> <button @click="handlego()">go1</button> //调用 methods:{ handleForward(){ this.$router.forward(); }, handleReplace(){ this.$router.replace("/mine"); }, handlego(){ this.$router.go(0) } }