Vue router 一些概念及基本使用 代码的方式修改路径 全局导航守卫

• 什么是路由

  路由就是通过互联网的网络把信息从源地址传输到目的地址的活动
  后端渲染：后端把网页渲染好，前端直接展示
  后端路由：后端处理URL和页面之间的映射关系
  前端渲染：浏览器中显示的网易于中的大部分内容都是由前端的JS代码在浏览器中执行
  前端路由：前端管理映射关系 更改URL 页面不需要整体刷新

• url的hash
  目的：更改URL 页面不需要整体刷新

• HTML5的history
  back() 加载 history 列表中的前一个 URL。
  forward() 加载 history 列表中的下一个 URL。
  go(数字) 加载 history 列表中的某个具体页面。

• 安装Vue-router
  npm install vue-router --save

• 在模块中试用vue-router
  1.导入路由的一项 调用 Vue.use(VueRouter)
  2.创建路由实例，并且传入路由映射配置
  3.在Vue实例中挂载创建的路由实例

//router文件夹下的  index.js
import  home  from '../components/Home'   //(引入)
Vue.ues(VueRouter)
const routes=[
//配置
{
   path:'',
   redirect:'/home'//redirect 重定向  路由默认地址
},
{
   path:'/home',
   component:home  //上面引入的那个名字
}
]
const  router = new VueRouter({
    routes,
    mode:'history'  ,  //把hash模式改成HTML5的history模式（去掉#）
    LinkActiveClass:'active'   //处于活跃状态的class名
    )


// 在app.vue写
    <router-link  to="/home">啊哈</router-link>  //点击这个显示home组件的内容
    <router-view></router-view>//点击后的home页面显示在哪
 

• router-link补充
  to属性：指定跳转路径
  tag属性：渲染形式后面接标签（不写默认a标签）
  replace属性:不能返回 （直接写replace 内部本来是用history.pushState() 加了这个属性以后试用history.replaceState()）
  active-class属性：点击后的class名字

• 通过代码的方式修改路径（监听模块点击）

<div id=“app”>
    //btn1 不传参的情况
    <button @click="btn1click">首页</button>   
    <button @click="btn2click">关于</button>  
</div>

<script>
let app=new Vue({
  el:'app',
  data:{
  },
  methods:{
   btn1click(){
     this.$router.push('/home')  //history.pushState() 能返回
     console.log("234567890")
   },
   btn2click(){
     this.$router.replace('/about')        //history.replaceState()  不能返回
   }
  }
)}
</script>

• 全局导航守卫

//在router配置的index.js页面中
const routes=[
//配置
{
   path:'/home',
   component:home,  //上面引入的那个名字
   meta:{
     title:'首页'
   }
}
]

//前置首位（guard）跳转前回调  全局的
router.beforeEach((to,from,next) =>{
   //从from跳到to
   docoment.title = to.matched[0].meta.tltle
  //因为有时候存在路由嵌套 所以先拿到matched[0]
   next()//必须写
})

• 路由独享守卫

//在router配置的index.js页面中
const routes=[
//配置
{
   path:'/home',
   component:home,  //上面引入的那个名字
   beforeEnter:(to,from,next) => {
        //跳转之前跑
       docoment.title ='首页';
       next()//必须写
   }
}
]