vue学习（十二）vue全家桶 Vue-router&Vuex

一 vue-router的安装

二 vue-router的基本使用

三 命名路由

四 动态路由的匹配和路由组件的复用

 

一 vue-router的安装#

NPM#

npm install vue-router

 

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

// 在router/index.js中
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 之后在main.js中

import router from './router'

二 vue-router的基本使用#

// router/index.js                  与直接生成的此文件有些不一样

// 1. 导入
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 2.模块化机制 使用
Vue.use(VueRouter)

// 3. 创建路由器对象
export default new VueRouter ({
    routes: [

  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]
})

// main.js 
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// 4 在main.js中挂载 router
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 

// App.vue 
<template>
  <div id="app">
    <div id="nav">
      <!--router-link相当于a标签 to相当于href-->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>

    </div>
    <!--router-view 相当于路由组件的出口-->
    <router-view/>
  </div>
</template>

 

 三 命名路由#

index.js
// 1. 导入
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 2.模块化机制 使用
Vue.use(VueRouter)

// 3. 创建路由器对象
export default new VueRouter({
    routes: [

        {
            path: '/',
            name: 'home',
            component: Home　　　　　　　　　　　　　　　　index.js  写个 name 
        },
        {
            path: '/about',
            name: 'about',
            component: About
        }
    ]
})

// App.vue
<template>
    <div id="app">
        <div id="nav">
            <!--<router-link to="/">Home</router-link> |-->
            <router-link :to="{name:'home'}">首页</router-link>
            |                                                     //  对比两句话
            <!--<router-link to="/about">About</router-link>-->
            <router-link :to="{name:'about'}">About</router-link>

        </div>
        <!--router-view 相当于路由组件的出口-->
        <router-view/>
    </div>
</template>

 

四 动态路由的匹配和路由组件的复用#

动态路由的匹配

需求：

http://localhost:8080/user/1
http://localhost:8080/user/2
// 都是同样的页面

要新建一个User.vue的文件

1. 先配置路由  index.js

// 1. 导入
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from '../views/User.vue'

// 2.模块化机制 使用
Vue.use(VueRouter)

// 3. 创建路由器对象
export default new VueRouter({
    routes: [

        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About
        },
        {
            //  1. 匹配路由 【：id】是哪个id的用户        ：id
            path: '/user/:id',
            name: 'user',
            component: User
        }
    ]
})

2 App.vue
<template>
    <div id="app">
        <div id="nav">
            <!--router-link相当于a标签 to相当于href-->
            <!--<router-link to="/">Home</router-link> |-->
            <router-link :to="{name:'home'}">首页</router-link>|
            |
            <!--<router-link to="/about">About</router-link>-->
            <router-link :to="{name:'about'}">About</router-link>|
            <router-link :to="{name:'user', params:{id:1}}">用户1</router-link>|
            <router-link :to="{name:'user', params:{id:2}}">用户2</router-link>|
        </div>
        <!--router-view 相当于路由组件的出口-->
        <router-view/>
    </div>
</template>

3 新建一个User.vue的文件
<template>
    <div class="user">
        <h1>用户{{$route.params.id}}页面</h1>
    </div>
</template>

路由组件的复用#

<script>
    export default {
        // 当路由参数变化时  /user/1 切换到 /user/2 原来的组件实例会被复用
        // 因为两个路由渲染了同个组件，复用高效
        created() {
            console.log('a',this.$route.params.id)
            // 这个时候就只能打印一个id 要想点那个id打印那个id 我们要用watch监听

        },
//        watch: {
//            // 监听 从哪个id变化成那个id
//            $route: (to, from) => {
//                console.log(to.params.id)
//                console.log(from)
//                // 监听 从哪个id变化成那个id  拿到id之后我们就可以发起ajax 请求后端接口数据 数据驱动视图
//            }
//        }
        beforeRouteUpdate(to,from,next){
            console.log(to.params.id)
//            console.log(from)
            // 一定要调用next 不然就阻塞（就是点不动了）
            next();
        }

    }
</script>