Vue-router 使用笔记

写这个主要是为了帮助我自己的记忆并且以后回顾  如果不小心竟然有人看   有错误的地方欢迎指出，如果....你懂的！

初学时写的，有些解释存在问题，只当作自己记录的笔记

路由守卫    meta

路由跳转    首先要说的是  name¶ms    path&query   不要用混了

this.$router.push & this.$router.replace 
区别： 第一个跳转把离开的地址放在历史栈  而replace 是直接把他替代了也就是说 回退的时候没有刚才离开的地址

this.$router.push("组建名")   //跳转   这个可以用在平行组件  我在子路由中使用发现不好用 
具体不太清楚(以前写的貌似这么直接用背身就是不正确的如果写路径是可以的)

this.$router.push({name:" 组件名 "})；

this.$router.push({path:" 路径 "})

this.$router.push({ name:"组件名"，params:{ code:2 }})      //跳转加传值

this.$router.push({path:'/user', query:{age:23} });

this.$route.params.code    //接收参数值

this.$route.query.age       //接收参数值

K     //这中需要    user /：id

 ad        //这两种路由都不需要   user /：id

sd（这里忘记了 后续项目尝试在做改动）

路由

路由中有三个基本的概念 route, routes, router。

route：它是一条路由

routes：它是路由组

router：它可以理解为路由的管理者

我们一起来配置一下路由 ：

1. 在js  中配置路由

const routes=[                                     //routes  是路由组 它里面包含每一条路由

{path:'/home',component:Home}          //path  指的是路径   component 指的是组建

{path:'/admin',component:Admin} 

]

2. 创建router 对路由进行管理

const router =new VueRouter({                      //router 理解为是路由的管理者

      routes                                                       // routes: routes 的简写

})

3.把路由实例放入到 vue的根实例中 就可以使用了

const app =new Vue({

  router

}).$mount('#app')

在vue-cli  中使用路由   

1.  首先创建 .vue文件写相应的 组件啊   没有组件还玩什么路由 （嘿嘿嘿）

2. 在App.vue  中定义  

    可以说是相当于标签  跳转用的  比如想跳到那个组件

点我去home溜达

  同样是必须的有的  因为没有它你的组件不知到渲染到哪里 

3.  在src目录下新建一个router文件夹  在里面建一个  .js文件

 // 首先引入vue  vue-router

      import Vue from "vue";                          

      import VueRouter from "vue-router"      

//  引入组件  

      import  home from "../home/home"      

      import  admin from "../home/admin"   

//  告诉vue  使用 vue-router

      Vue.use(VueRouter)

//  定义routes  路由组

      const routes =[

           {path:"/home",component:home}

           {path:"/admin",component:admin}

     ]

//  定义路由的管理者  router

      var router = new VueRouter({

          base:'', // 路由路径的前缀,需要和 nginx 中的配置保持一致.

          mode: 'history', // 切换路径模式，变成history模式

          scrollBehavior: () => ({ y: 0 }),

          routes             //routes:routes  简写

})

//  最后将路由暴露出去  让其他地方使用

         export default router             

4.  把路由 注入到根实例中     在 main.js  中操作

//  引入vue  和 vue-router     不然也用不了啊  

     import  Vue from "vue"

     import VueRouter  from "vue-router"

//  引入路由

     import router from "./router/index"

     new Vue({

            el:"#app",

             router,

             render: h => h(App),

    })

动态路由

{  path : "/user/:id",  component : user  }

嵌套路由

{

path::"/home",

component: home,

children:[

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

  ]

} 

命名路由

{

path: "/user/:id",

name:"user",

component:user

}

  user

  user

／／ 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定

编程式导航　  跳转

主要应用在按钮上  调用   router.push()方法

通过  this.$router.push("user")    //就可以跳转到对应的组件

   // 还可以  传值

this.$router.push({ name:user , params:{ code:2 }})

this.$route.params.code  接收值

知识点

最后 我来总结一下  一些有用的 和 不知道有用没用的知识点

meta  :  根据 vue-router 中的 meta  动态设置 html  中 title 标签中的内容

   {

       path:'/updatePmsPsudoRoom',

       name: 'updatePmsPsudoRoom',

       component: updatePmsPsudoRoom,

       meta: {

               requireAuth: true,             // 自定义属性

               wrapper: true                   // 同上

               title:首页

     }

},

redirect  重定向   

 {

       path:'/',                   //因为  程序启动时 第一个进入的就是 /    所以用重定向避免错误

       name: 'default',

       redirect: '/index'

 },