Vue 路由

路由写法

========

template部分

<div>
     <!-- vue-router 内置组件 第一种 不方便
        <router-link to="/login">登陆去</router-link>
        <router-link to="/register">注册去</router-link>
      -->
    <!-- vue-router 内置组件 第二种 -->
    <!-- query 传参不需要更改 router部分 params传参需要更改 router部分 -->
    <router-link :to="{ name: 'login' ,  query: { id: 1} }">登陆去</router-link>
    <router-link :to="{ name: 'register' , params: {name: abc}}">注册去</router-link>
    <!-- 路由显示的位置 --->
    <router-view></router-view>
</div>

js 部分

// 登陆页面
created () {
  // 查看传递的参数 
  console.log(this.$route.query);
}
// 注册页面
created () {
  // 查看传递的参数 
  console.log(this.$router.params);
}

router部分

var router = new VueRouter({
  routes: [
    {
      name: 'login', // 路由跳转可以根据名字跳转
      path: '/login', // 不需要修改
      component: Login
    },
    {
      name: 'register', // 路由跳转可以根据名字跳转
      path: '/register:name', // params 需要在后方接收
      component: Register
    }
  ]
});