第4章 Vue全家桶(vue-router+vuex)

4.1 vue-router的介绍和下载：

介绍

Vue Router 是 Vue.js 官⽅的路由管理器。它和 Vue.js 的核⼼深度集 成，让构建单⻚⾯应⽤变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有⾃动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中⾃动降级 ⾃定义的滚动条⾏为

起步

⽤ Vue.js + Vue Router 创建单⻚应⽤，是⾮常简单的。使⽤ Vue.js ，我们已经可以通过组合组件来组成应⽤程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪⾥渲染它们

安装

npm i vue-router -S

在main.js中

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)

推荐使⽤:vue add router 添加插件(记得提前提交)

基本使⽤

router.js

import Vue from 'vue'
//1.导⼊
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
//2.模块化机制 使⽤Router
Vue.use(Router)
//3.创建路由器对象
const router = new Router({
 routes:[{
 path: '/home',
 component: Home
 },
 {
 path: '/about',
 component: About
 }
 ]
})
export default router;

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
 // 4.挂载根实例
 router,
 render: h => h(App)
}).$mount('#app')

做好以上配置之后

App.vue

<template>
 <div id="app">
 <div id="nav">
 <!-- 使⽤router-link组件来导航 -->
 <!-- 通过传⼊to属性指定连接 -->
 <!-- router-link默认会被渲染成⼀个a标签 -->
 <router-link to="/">Home</router-link> |
 <router-link to="/about">About</router-link> |
 </div>
 <!-- 路由出⼝ -->
 <!-- 路由匹配的组件将被渲染到这⾥ -->
 <router-view/>
 </div>
</template>

打开浏览器.,切换Home和About超链接,查看效果

项目目录如下：

4.2 vue-router的基本使用

// index.js里面的内容

import Vue from 'vue'
// 1.导入
import VueRouter from 'vue-router'
// 2.模块化机制，使用Router
import HomeView from '../views/HomeView.vue'
// 3.创建路由器对象

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

// main.js里面的内容

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

Vue.config.productionTip = false

new Vue({
  // 4.挂载到vue实例中
  router,
  render: h => h(App)
}).$mount('#app')

// App.vue里面的内容

<template>
  <div id="app">
    <nav>
      <!-- router_link相当于a标签，to属性相当于a标签的href -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <!-- //router-view相当于路由组件的出口 -->
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

// HomeView.vue里面的内容

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

// AboutView.vue里面的内容

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

上面这些是主要文件的内容，其它的文件只是项目架构的初始化内容。

项目展示的效果：

4.3　命名路由　　动态路由    静态路由

// App.vue里面的内容

<template>
  <div id="app">
    <nav> <!-- //<nav> 标签定义导航链接的部分 -->
      <!-- router_link相当于a标签，to属性相当于a标签的href -->

      <!-- <router-link to="/">Home</router-link> | 这是静态路由
      <router-link to="/about">About</router-link> -->
      <router-link :to="{name:'home'}">Home</router-link> | <!-- 这是动态路由 -->
      <router-link :to="{name:'about'}">About</router-link>
      
      <!-- //router-view相当于路由组件的出口 -->
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

4.4　动态路由匹配和路由组件复用

// User.vue里面的内容

<template>
    <div>
        用户页面 {{$route.params.id}}
    </div>
</template>

<script>
    export default {
        //当路由参数变化时 /user/1切换到/user/2原来的组件实例会被复用
        //因为两个路由渲染了同个组件    复用高效
        created(){
            console.log(this.$route.params.id);
        },
        //响应路由参数的变化
        // watch:{
        //     $route:(to,from)=>{ //to是到哪里去，from是来自哪里
        //         console.log(to.params.id);
        //         //发起ajax 请求后端接口数据 数据驱动视图
        //     }
        // }
        beforeRouteUpdate(to,from,next){
            console.log(to.params.id);

            //一定要调用next，不然会阻塞整个路由  放行
            next();
        }
    }
</script>

<style lang="scss" scoped>

</style>

// index.js里面的内容

import Vue from 'vue';
// 1.导入
import VueRouter from 'vue-router';
// 2.模块化机制，使用Router
import HomeView from '../views/HomeView.vue';
import User from '@/views/User';  //@等同于..
// 3.创建路由器对象

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path:'/user/:id',  //:id就是动态路由匹配
    name:'user',
    component:User
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router


// http://localhost:8081/user/1
// http://localhost:8081/user/2
// 同一个页面

// App.vue里面的内容

<template>
  <div id="app">
    <nav> <!-- //<nav> 标签定义导航链接的部分 -->
      <!-- router_link相当于a标签，to属性相当于a标签的href -->

      <!-- <router-link to="/">Home</router-link> | 这是静态路由
      <router-link to="/about">About</router-link> -->
      <router-link :to="{name:'home'}">Home</router-link> | <!-- 这是动态路由 -->
      <router-link :to="{name:'about'}">About</router-link> |
      <router-link :to="{name:'user',params:{id:1}}">User1</router-link>  |  <!-- params是参数的意思。 -->
      <router-link :to="{name:'user',params:{id:2}}">User2</router-link>  <!-- params是参数的意思。 -->
      
      <!-- //router-view相当于路由组件的出口 -->
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

4.5 404 路由和路由匹配优先级

同一个路径可以匹配多个路由，匹配的优先级按照路由的定义顺序：谁先定义的，谁的优先级最高

// 404.vue里面的内容

<template>
    <div>
        <h3>404页面</h3>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

// User-admin里面的内容

<template>
    <div>
        <h3>User-admin页面</h3>
        <h4>{{$route.params.pathMatch}}</h4>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

// index.js里面的内容

import Vue from 'vue';
// 1.导入
import VueRouter from 'vue-router';
// 2.模块化机制，使用Router
import HomeView from '../views/HomeView.vue';
import User from '@/views/User';  //@等同于..
// 3.创建路由器对象

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  //同一个路径可以匹配多个路由，匹配的优先级按照路由的定义顺序：谁先定义的，谁的优先级最高
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path:'/about',
    name:'about',
    component:HomeView
  },
  {
    path:'/user/:id',  //:id就是动态路由匹配
    name:'user',
    component:User
  },
  {
    path:'/user-*',  //*是通配符
    component:()=>('@/views/User-admin')
  }, 
  {
    path:'*',
    component:()=>import('@/views/404')  //路由的执行顺序是从上到下，所以404永远要放在最后面。
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router


// http://localhost:8081/user/1
// http://localhost:8081/user/2
// 同一个页面

4.6 路由查询参数

// Page.vue里面的内容

<template>
    <div>
        <h3>Page页面</h3>
    </div>
</template>

<script>
    export default {
        created () {
            // console.log(this.$route);
            const {id,title} = this.$route.query;
            console.log(id,title);
            //拿到id,title后，就可以和后端进行交互了。
        },
    }
</script>

<style lang="scss" scoped>

</style>

// index.js里面的内容

import Vue from 'vue';
// 1.导入
import VueRouter from 'vue-router';
// 2.模块化机制，使用Router
import HomeView from '../views/HomeView.vue';
import User from '@/views/User';  //@等同于..
// 3.创建路由器对象

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  //同一个路径可以匹配多个路由，匹配的优先级按照路由的定义顺序：谁先定义的，谁的优先级最高
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  // {
  //   path:'/about',
  //   name:'about',
  //   component:HomeView
  // },
  {
    path:'/user/:id',  //:id就是动态路由匹配
    name:'user',
    component:User
  },
  //http://localhost:8083/page?id=1&title=foo   query
  {
    path:'page',
    name:'page',
    component:()=>import('@/views/Page')
  },
  {
    path:'/user-*',  //*是通配符
    component:()=>('@/views/User-admin')
  }, 
  {
    path:'*',
    component:()=>import('@/views/404')  //路由的执行顺序是从上到下，所以404永远要放在最后面。
  }
]

const router = new VueRouter({
  mode: 'history',  //history模式，是干净的路由地址 
  base: process.env.BASE_URL,
  routes
})

export default router


// http://localhost:8081/user/1
// http://localhost:8081/user/2
// 同一个页面

// App.vue里面的内容

<template>
  <div id="app">
    <nav> <!-- //<nav> 标签定义导航链接的部分 -->
      <!-- //router_link相当于a标签，to属性相当于a标签的href -->

      <!-- //<router-link to="/">Home</router-link> | 这是静态路由
      <//router-link to="/about">About</> -->
      <router-link :to="{name:'home'}">Home</router-link> | <!-- 这是动态路由 -->
      <router-link :to="{name:'about'}">About</router-link> |
      <router-link :to="{name:'user',params:{id:1}}">User1</router-link>  |  <!-- //params是参数的意思。 -->
      <router-link :to="{name:'user',params:{id:2}}">User2</router-link>  |
      <router-link :to="{name:'page',query:{id:1,title:'foo'}}">Page</router-link>  
      
      <!-- //router-view相当于路由组件的出口 -->
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

4.7 路由重定向和别名 路由组件传值

路由重定向，即：http://localhost:8083回车跳转到http://localhost:8083/home，显示页面还是同一个页面。

给路由起别名(用的很少)http://localhost:8083/user/page?id=1&title=foo和http://localhost:8083/aaa都可以访问Page页面 下面代码包括路由重定向和路由别名：

// index.js里面的内容

import Vue from 'vue';
// 1.导入
import VueRouter from 'vue-router';
// 2.模块化机制，使用Router
import HomeView from '../views/HomeView.vue';
import User from '@/views/User';  //@等同于..
// 3.创建路由器对象

Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    // redirect:'/home'
    redirect:{name:'home'} //路由重定向，即：http://localhost:8083回车跳转到http://localhost:8083/home，显示页面还是同一个页面。
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  //同一个路径可以匹配多个路由，匹配的优先级按照路由的定义顺序：谁先定义的，谁的优先级最高
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  // {
  //   path:'/about',
  //   name:'about',
  //   component:HomeView
  // },
  {
    path:'/user/:id',  //:id就是动态路由匹配
    name:'user',
    component:User,
    // props:true  //传值1.props值为true时，将path里面的id传递给component里面的User.vue里面。
    
    //下面是通过props传id和title。
    props:(route)=>({
      id:route.params.id,
      title:route.query.title
    })
  },
  //http://localhost:8083/page?id=1&title=foo   query
  {
    path:'page',
    name:'page',
    component:()=>import('@/views/Page'),  //这里的方法等同于import page from '../views/Page.vue'
    alias:'/aaa'  //给路由起别名
    //给路由起别名(用的很少)http://localhost:8083/user/page?id=1&title=foo和http://localhost:8083/aaa都可以访问Page页面
  },
  {
    path:'/user-*',  //*是通配符
    component:()=>('@/views/User-admin')
  }, 
  {
    path:'*',
    component:()=>import('@/views/404')  //路由的执行顺序是从上到下，所以404永远要放在最后面。
  }
]

const router = new VueRouter({
  mode: 'history',  //history模式，是干净的路由地址，即在地址栏里面没有#
  base: process.env.BASE_URL,
  routes
  // routes:[
  //   {
  //     path:'/',
  //     redirect:'/home'
  //   }
  // ]
})

export default router


// http://localhost:8081/user/1
// http://localhost:8081/user/2
// 同一个页面

路由传值：// props:true //传值1.props值为true时，将path里面的id传递给component里面的User.vue里面。

项目目录：

下面通过：传值1-传值2-传值3 的顺序讲述传值过程。

index.js代码：

// index.js里面的内容

import Vue from 'vue';
// 1.导入
import VueRouter from 'vue-router';
// 2.模块化机制，使用Router
import HomeView from '../views/HomeView.vue';
import User from '@/views/User';  //@等同于..
// 3.创建路由器对象

Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    // redirect:'/home'
    redirect:{name:'home'} //路由重定向，即：http://localhost:8083回车跳转到http://localhost:8083/home，显示页面还是同一个页面。
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  //同一个路径可以匹配多个路由，匹配的优先级按照路由的定义顺序：谁先定义的，谁的优先级最高
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  // {
  //   path:'/about',
  //   name:'about',
  //   component:HomeView
  // },
  {
    path:'/user/:id',  //:id就是动态路由匹配
    name:'user',
    component:User,
    // props:true  //传值1.props值为true时，将path里面的id传递给component里面的User.vue里面。
    
    //下面是通过props传id和title。
    props:(route)=>({
      id:route.params.id,
      title:route.query.title
    })
  },
  //http://localhost:8083/page?id=1&title=foo   query
  {
    path:'page',
    name:'page',
    component:()=>import('@/views/Page'),  //这里的方法等同于import page from '../views/Page.vue'
    alias:'/aaa'  //给路由起别名
    //给路由起别名(用的很少)http://localhost:8083/user/page?id=1&title=foo和http://localhost:8083/aaa都可以访问Page页面
  },
  {
    path:'/user-*',  //*是通配符
    component:()=>('@/views/User-admin')
  }, 
  {
    path:'*',
    component:()=>import('@/views/404')  //路由的执行顺序是从上到下，所以404永远要放在最后面。
  }
]

const router = new VueRouter({
  mode: 'history',  //history模式，是干净的路由地址，即在地址栏里面没有#
  base: process.env.BASE_URL,
  routes
  // routes:[
  //   {
  //     path:'/',
  //     redirect:'/home'
  //   }
  // ]
})

export default router


// http://localhost:8081/user/1
// http://localhost:8081/user/2
// 同一个页面

传值1.props值为true时，将path里面的id传递给component里面的User.vue里面。

// User.vue里面的内容

<template>
    <div>
        <div>用户页面 {{$route.params.id}}</div>
        <!-- <div>用户页面{{id}}</div>   //传值3.这里直接调用props传递过来的id使用。 -->
        <div>用户页面 {{id}}-{{title}}</div>  

    </div>
</template>

<script>
    export default {
        //当路由参数变化时 /user/1切换到/user/2原来的组件实例会被复用
        //因为两个路由渲染了同个组件    复用高效
        created(){
            console.log(this.$route.params.id);
        },
        // props:['id'],   //传值2.props接收传递过来的id。
        props:['id','title'],   
        //响应路由参数的变化
        // watch:{
        //     $route:(to,from)=>{ //to是到哪里去，from是来自哪里
        //         console.log(to.params.id);
        //         //发起ajax 请求后端接口数据 数据驱动视图
        //     }
        // }
        beforeRouteUpdate(to,from,next){
            console.log(to.params.id);

            //一定要调用next，不然会阻塞整个路由  放行
            next();
        }
    }
</script>

<style lang="scss" scoped>

</style>

传值2.props接收传递过来的id。

传值3.这里直接调用props传递过来的id使用。