20190613-Vue Router 基础（一）

摘要：那么这个时候，我们需要在中，加载配置三个组件为复数。传递参数不需要在中进行配置获取参数其他的写法带查询参数，下面的结果为拼到中

Vue Router是Vue.js的官方路由管理器，可以控制Vue单页应用的路由。

新版的vue-cli脚手架中，默认default模式没有router依赖，请选择Manually select features后添加Router依赖后，选择History模式。

vue-cli官网

    
    新建分类
    

我们可以利用标签来控制单页应用的跳转路径

    新建分类


export default {
  methods: {
    onCreate() {
      this.$router.push({
        path: "/categories/create"
      })
    }
  }
}

我可以使用this.$router方法进行操作路由

执行了push或跳转操作还远远不够，我们还在router.js上进行路由（目录）添加你需要对应标准的地址以及地址包含component组件，不然编译器不知道你要跳转的实质内容是什么~

// 按需加载你需要的依赖

import Vue from "vue"
import Router from "vue-router"
import Main from "./views/main.vue"
import CategoryEdit from "./components/categoryEdit.vue"

Vue.use(Router)

export default new Router({
  mode: "history",   // history模式
  base: process.env.BASE_URL, // 环境内部基础地址
  routes: [
    {
      path: "/", // 当地址在根目录的时候，跳转到Main的组件，这就是首页
      name: "main",
      component: Main,
      children: [
        {
          path: "/categories/create",// 它是Main的子路由，默认在首页 调用CategoryEdit组件
          name: "categoryCreate",
          component: CategoryEdit
        },
        {
          path: "/categories/create", // 它是Main的子路由， 当地址转到/categories/create上，则调用CategoryEdit组件
          name: "categoryCreate",
          component: CategoryEdit
        }
      ]
    }
  ]
})

刚刚在上面我们提高了「子路由」，然后我们开始了解下嵌套路由

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

这是官网的栗子，我们看来下更直观。

我们要做的是改变这个网页的子路由内容组件人，让我们看下代码吧~

    
      
        
          
          
            新建分类
            分类列表
          
        
      
    
    
      
      
      
        
        
        
      
    


export default {
  methods: {
    onCreate() {
      this.$router.push({
        path: "/categories/create"
      })
    }
  }
}

当我们在进行执行 $this.router.push 或者 跳转的时候，
我们可以看到，push的路径是「/categories/create」，回到router.js代码上,我们可以看到，/categories/create是在/根目录下的children里面，这就说明它是根目录的子路由，子路由在子路由标签上进行渲染。

如图上，父容器HTML中有3个route视图：

header

side

content

我们需要这三个都是动态的，都是需要根据需求加载不同的内容。

那么这个时候，我们需要在router.js中，加载配置三个组件

components为复数。

import Header from "./components/header.vue"
import Side from "./components/side.vue"
import Content from "./components/content.vue"
import CategoryEdit from "./components/categoryEdit.vue"
import CategoryList from "./components/categoryList.vue"

 routes: [
    {
      path: "/",
      name: "main",
      components: {
        efault: Header,
        a: Side,
        b: Content
      },
      children: [
        {
          path: "/categories/create/:userid",
          name: "categoryCreate",
          component: CategoryEdit
        },
        {
          path: "/",
          name: "categoryList",
          component: CategoryList
        }
      ]
    }
  ]

在绝大分部情况下，我们需要利用同一个组件加载不同的数据内容（比如详情、用户表信息等等），那我们怎么保证跳转的唯一性呢?

这时候，我们需要利用路由命名方法

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "main",
      component: Main,
      children: [
        {
          path: "/categories/create/:userid", // 这是userid就是参数名
          name: "categoryCreate",
          component: CategoryEdit
        },
        {
          path: "/",
          name: "categoryList",
          component: CategoryList
        }
      ]
    }
  ]
})

  onCreate() {
      this.$router.push({
        name: "categoryCreate",
        params: { userid: 123 }
      })
    }

http://localhost:8080/categories/create/123

mounted() {
    // 注意是this.$route，是路由对象
    console.log("你获取的参数是：" + this.$route.params); 
},

打印出来的数据

{
   userid: "123"
}

关于命名路由，还有其他的写法

// HTML上
User

// .vue组件的其他写法
const userId = "123"

router.push({ name: "user", params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123

// 这里的 params 不生效，必须使用上面的写法
router.push({ path: "/user", params: { userId }}) // -> /user

这个和一般的url上拼接参数，获取一样，只不过router提供一个设置和获取方法。

http://localhost:8080/categories/create/123?dataval=admin

    this.$router.push({
        name: "categoryCreate?ad=11",
        params: { 
          userid: 123 
        },
        query: {
          dataval: "admin"
        }
      })

不需要在router.js中进行配置

let val = this.$route.query.dataval; // admin

Register


this.$router.push({path: `/categories/create/${userid}?admin=tre`});