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}}"