vue的路由
vueCli2创建项目vue init webpack 项目名称
Route 决定数据包从来源到目的地的路径,传送将输入端的数据转移到合适的输出端。有一个很重要的东西
路由器需要信息再次进行映射将内网ip和电脑的mac地址绑定,映射表。
- 后端路由
什么是前端渲染,什么是后端渲染:后端处理url的映射关系
- 前端路由,单页面复应用,只有一个页面,通过
- history的方法包括history.pushState(),history.replace()
- hash两种模式进行地址的显示
vue中的路由
import VueRouter from 'vue-router' import Vue from 'vue' import Home from '../components/Home' import About from '../components/About' //1通过vue.use(安装)传入一个插件 Vue.use(VueRouter) //2.创建路由对象,带默认路径 const routers=[
{
path:'',
redirect:'/Home'
}, { path:'/Home', component:Home }, { path:'/About', component:About } ] const router=new VueRouter({ //配置路由和组件之间的应用关系 routers, mode:'history' }); //3.将router对象传入到Vue的实例中 export default router
router-link是全局注册的一个组件
属性1:to="/home" 路径
属性2: tag="button"渲染成的标签
属性3: replace 使用history 的replace方法不能够返回上一个单页面
属性4:router-link-active router-link在路由实现的时候会为渲染的目标添加一个router-link-active的属性,可以为其设置点击的样式
属性5: 会多一个 active-class="active" 可以把属性4改为router-link-active改为 active 。可以在 路由文件中统一修改路由的属性 为linkActiveClass:‘activeClass’
example
<router-link to="../Home" replace tag="button">首页</router-link>
同时可以使用点击事件@click=''来使用代码代替to 属性实现路由的跳转
通过路由获取参数的方式有一个$route.params.abc ,这里的route是引入vueRouter之后在全局注册的,
可通过对象来传递对象 v-bind:to="{path:'/profile',query:{name:'why,age:18,height:25}}"