2.5 vue-router使用

2.5.1 基本使用

#1. 安装路由模块
npm install vue-router --save

#2.login.vue
<template>
  <div>
    <h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
    <button @click="show">点我</button>
  </div>
</template>

<script>
  export default {
    data() {
      // 注意：组件中的 data 必须是 function
      return {
        msg: "123321"
      };
    },
    methods: {
      show() {
        console.log("调用了 login.vue 中的 show 方法");
      }
    }
  };
</script>

<style>
</style>

#3.register.vue
<template>
    <div>
        <h1>这是注册组件</h1>
    </div>
</template>

#4.main.js
import Vue from 'vue'

//1.导入VueRouter并且安装
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//2.导入组件
import login from './login.vue'
import register from './register.vue'

//3.创建路由对象
var router = new VueRouter({
    routes: [
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register }
    ]
});


var vm = new Vue({
    el: '#app',
    data: {
        msg: '123'
    },
    //4.挂载路由
    router:router
})

#5.index.html
<div id="app">
    <router-link to="/login">登陆</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
</div>

#6.webpack.config.js参照之前的配置

2.5.2 vue-router和render结合使用

# 在上面案例的基础上
#1.新增App.vue
<template>
    <div>
        <h1>账户组件</h1>
        <!--组件中的路由-->
        <router-link to="/login">登陆</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
</template>

#2.main.js
import app from './App.vue'
var vm = new Vue({
    el: '#app',
    data: {
        msg: '123'
    },
    //渲染组件替换el
    render:e=>e(app),
    router:router
})

#3.index.html
<div id="app">

</div>

2.5.3 路由嵌套

# 在上面案例的基础上
#1. 新建subcom/findpwd.vue
<template>
    <div>
        <h1>找回密码</h1>
    </div>
</template>

#2. 新建subcom/thirdpartlogin.vue
<template>
    <div>
        <h1>微信登陆</h1>
    </div>
</template>

#3.修改login.vue
<template>
  <div>
    <h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
    <button @click="show">点我</button>

    <router-link to="/login/findpwd">找回密码</router-link>
    <router-link to="/login/thirdpartlogin">第三方登陆</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    data() {
      // 注意：组件中的 data 必须是 function
      return {
        msg: "123321"
      };
    },
    methods: {
      show() {
        console.log("调用了 login.vue 中的 show 方法");
      }
    }
  };
</script>

#4.在main.js中配置子路由
var router = new VueRouter({
    routes: [
        { path: '/', redirect: '/login' },
        { path: '/login',
          component: login,
          children:[
              {path:'findpwd',component:findpwd},
              {path:'thirdpartlogin',component:thirdpartlogin}
          ]
        },
        { path: '/register', component: register }
    ]
});