vue路由

一：路由 : 在前端中路由就是相当一个个页面

  1.在创建带有路由的Vue项目时，Vue create luyou(filename--文件夹名)

    在cmd窗口中要选中router选项

  2.在router文件夹下的index.js中引入路由

    ①.引入vue,router,路由...

    import Vue from 'vue'   ---  引入vue

    import VueRouter from 'vue-router'  --- 引入router路由

    import HomeView from '../views/HomeView.vue'  --- 引入具体的页面模块

    ②.调用vue-router

    Vue.use(VueRouter)  -- 使用VUe.use()调用vue-router

    ③.注册路由

    const routes = [{   -- 注册引入进来的多个路由[数组{每一个路由},...]

      path: '/',

      name: 'home',    

      component: HomeView

    }]

  3.具名路由 -- 有name属性的路由  

二：多级路由

    在一个路由下面，利用children属性再次注册子级路由

    const routes = [{   -- 注册引入进来的多个路由[数组{每一个路由},...]

      path: '/',

      name: 'home',     ***带有name属性的就是具名路由***

      component: HomeView，

      children:[{  -- 也是一个数组的形式[{ }]

        path: 'child',

        name: 'child',

        component: Child  ***注意要在注册之前使用import将其引入 -- import Child from '../views/Child.vue' ***

      }]

    }]

三：路由传参

  1.标签式跳转<router-link> -- 会被解析成a标签

  基本用法

        <li>

            <router-link to="/home/first">点击跳转</router-link>

        </li>

        ①. 不带参数

            <router-link :to="{name:'home'}">

            <router-link :to="{path:'/home'}"> //name,path都行, 建议用name

           // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。

        ②. 带参数

            <router-link :to="{name:'home', params: {id:1}}">

           // params传参数 (类似post)

           // 路由配置 path: "/home/:id" 或者 path: "/home:id"

           // 不配置path ,第一次可请求,刷新页面id会消失

           // 配置path,刷新页面id会保留

           // html 取参 $route.params.id

           // script 取参 this.$route.params.id

            <router-link :to="{name:'home', query: {id:1}}">

           // query传参数 (类似get,url后面会显示参数)

           // 路由可不配置

           // html 取参 $route.query.id

           // script 取参 this.$route.query.id

  2.编程时路由跳转 this. $router.push( ) -- 跳转到指定的URL，在history栈中添加一个记录，点击后退会返回上一个页面。

        ①. 不带参数

        // 字符串

        this.$router.push('/home')

        this.$router.push('/home/first')

        // 对象

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

        this.$router.push({ path: '/home/first' })

        // 命名的路由

        this.$router.push({name:'home'})

        ②. query传参

            this.$router.push({name:'home',query: {id:'1'}})

            this.$router.push({path:'/home',query: {id:'1'}})

            // html 取参 $route.query.id

            // script 取参 this.$route.query.id

        ③. params传参

             this.$router.push({name:'home',params: {id:'1'}})

            // 只能用 name

            // 路由配置 path: "/home/:id" 或者 path: "/home:id" ,

            // 不配置path ,第一次可请求,刷新页面id会消失

            // 配置path,刷新页面id会保留

            // html 取参 $route.params.id

            // script 取参 this.$route.params.id

        ④. query和params区别

             query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传,

             密码之类还是用params刷新页面id还在

             params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

 

  3.this.$router.replace( )  --- 用法与push类似

  用法同上,但是跳转到指定的url，不会向history里面添加新的记录，点击返回，会跳转到上上一个页面，上一个记录是不存在的。

  4.this.$router.go(n)

    相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面。

    this. $router.go(1) //前进一步 相当于history.forward()

    this. $router.go(-1) //后退一步 相当于history.back()

    this. $router.go(10) //前进10步