history.pushState({},'','home')

history.back()

history.forward()  等价于  history.go(1)
history.back()  等价于  history.go(-1)

history.replaceState({},'','home')

cnpm install vue-router --save

//1.导入VueRouter
import VueRouter from 'vue-router'
//2.导入Vue   (因为后面要用Vue.use())
import Vue from 'vue'//3.通过Vue.use安装一下插件
Vue.use(VueRouter)//4.创建路由对象
routes=[]const router = new VueRouter({routes
})//5.暴露路由对象
export default router

import Vue from 'vue'
import App from './App.vue'
import router from './router'     //6.导入暴露的vuerouter (/index.js是默认,路径中省略了)Vue.config.productionTip = falsenew Vue({router,      //7. 将导入的router传给自己的router属性render: h => h(App),
}).$mount('#app')

import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home'  //1. 导入第一个组件Home
import About from '../components/About' //1. 导入第二个组件AboutVue.use(VueRouter)
const routes = [{path: '/',       //2.添加映射关系component: Home},{path: '/about',  //2.添加映射关系component: About}
]const router = new VueRouter({routes
})export default router

<template><div id="app"><router-link to="/home">首页</router-link>   <!-- 3.使用路由 通过router-link标签,配置to属性提供链接目标,点击此标签会触发对应的url请求--><router-link to="/about">关于</router-link><!-- 3.使用路由 通过router-link标签,配置to属性提供链接目标,点击此标签会触发对应的url请求--><router-view></router-view><!-- 4.使用路由 通过router-view占位符标签,确定请求过来的内容的占位--></div>
</template><script>
export default {name: 'App',
}
</script><style scoped>
</style>

const routes = [{path:'',redirect:'home'},
]

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

btnClick(){this.$router.push('/home')
}

btnClick(){this.$router.replace('/home')
}

  {path:"/user/:userId",component:User}

//在<router-link>上动态绑定
<router-link :to="'/user/'+userId">用户</router-link> //或者通过普通标签的事件:btnClick(){this.$router.push('/user/'+this.userId)}

$route   :当前活跃路由 每个组件都有一个全局对象$route
一定要和$router区分开!!!!!

  computed: {userId(){return this.$route.params.userId }},

    path: '/about',  //2.添加映射关系component: ()=>import('../components/About')},

  {path: '/home',       //这是home的映射component: Home,children:[           //它里面可以定义一个children,里面放子映射{path: '',       //添加默认子映射redirect:'news'},{path: 'news',                   //添加子映射关系 路径只写名字 newscomponent: ()=>import('../components/HomeNews')},{path: 'msgs',                   //添加子映射关系component: ()=>import('../components/HomeMsg')},]},

<template><div><h2>我是首页</h2><p>我是首页内容</p><router-link to="/home/news">看看新闻</router-link><router-link to="/home/msgs">看看消息</router-link><router-view></router-view></div>
</template><script>
export default {name: "Home"
};
</script><style scoped>
</style>

<router-link :to="{path:'/profile',     <--path属性还是路由链接-->query:{              <--query属性里面传入一个对象,对象里都是键值对--> id:'lili',age:20,gender:'girl'}}">Profile</router-link>

this.$route.query

  methods: {btnClick(){this.$router.push({path:'/profile',query:{name:"lili",age:18,gender:'girl'}})}}

<template><div><h2>我是首页</h2><p>我是首页内容</p><router-link to="/home/news">看看新闻</router-link><router-link to="/home/msgs">看看消息</router-link><keep-alive><router-view></router-view></keep-alive></div>
</template><script>
export default {name: "Home"
};
</script><style>
</style>

<template><div><h1>您有4条短消息</h1><ul><li>短消息1</li><li>短消息2</li><li>短消息3</li><li>短消息4</li></ul></div>
</template><script>
export default {name:"HomeMsg",activated() {console.log("我真活跃");},deactivated() {console.log("我不活跃了");},
}
</script><style></style>

    <keep-alive exclude="HomeMsg,User">    这会排除这两个组件的keep-alive<router-view></router-view></keep-alive>

router.beforeEach((to,from,next)=>{   //这就是页面跳转过程document.title= to.meta.matched[0].title  //将页面标题改为了to路由的meta信息里的标题next()  // 必须调用next(),以维护链式
})

  {path:"/profile",component:()=>import('../components/Profile'),meta:{title:'档案'},},

const router = new VueRouter({routes: [{path: '/foo',component: Foo,beforeEnter: (to, from, next) => {// ...}}]
})

const Foo = {template: `...`,beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当守卫执行前，组件实例还没被创建},beforeRouteUpdate (to, from, next) {// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}
}
beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。beforeRouteEnter (to, from, next) {next(vm => {// 通过 `vm` 访问组件实例})
}
注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。beforeRouteUpdate (to, from, next) {// just use `this`this.name = to.params.namenext()
}
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。beforeRouteLeave (to, from, next) {const answer = window.confirm('Do you really want to leave? you have unsaved changes!')if (answer) {next()} else {next(false)}
}