vue框架之vue-router路由

一、初始化

1、创建根组件 /App.vue

## HTML部分
<template>
  <div id="app">
    App
  </div>
</template>## script部分
<script>
  import Home from './Home.vue'
  import User from './User.vue'
  
  export default {
    data () {
      return {}
    },
    components: {
      Home,
      User,
    }
  }
</script>

## style部分省略
复制代码

2 、创建子组件 /Home.vue

## HTML部分
<template>
  <div id="home">
    this is Home page
  </div>
</template>

## script部分
<script>
  export default {
    data () {
      return {}
    }
  }
</script>

## style部分省略复制代码

 /User.vue

## HTML部分
<template>
  <div id="user">
     this is User page
  </div>
</template>

## script部分
<script>
  
  export default {
    data () {
      return {}
    }
  }
</script>

## style部分省略复制代码

3、创建入口文件 /index.js

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

 new Vue({
    el: '#root',
    render: (h) => h(App)
})复制代码

二、 配置vue-router 

1. 安装  $ npm install -S vue-router

2. 创建 /config/routes.js

import Home from '../Home.vue'
import User from '../User.vue'

export default [
  {
    path: '/',
    // 路由跳转
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    name: 'home',
    meta: {
      title: 'this is app',
      description: '这个是Home页面'
    }
  },
  {
    path: '/user/:id',
    // 可以将参数id传到组件的props中
    // props: true,        // 只传参到props
    // props: {            // 只自定义变量
    //   count: '234'
    // },
    // 使用函数可以获取参数，也可以自定义新的变量
    props: (route) => ({
      id: route.params.id,
      count: '234'
    }),
    component: User,
    name: 'user'
  }
]复制代码

3. 创建 config/router.js

import Router from 'vue-router'
import routes from './routes'

// 函数形式export， 对应使用时也需要()调用
export default () => {
  return new Router({
    routes,
    mode: 'history',   // 去除#号
    base: '/',         // 设置根路径
    linkActiveClass: 'active-link',            // 改变router-link跳转时的样式
    linkExactActiveClass: 'exact-active-link',
    // 路由跳转时页面是否需要滚动
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        return {x: 0, y: 0}
      }
    }
  })
}
复制代码

4 . 在App.vue中添加router-link

<template>
  <div id="app">
    // 配置每个页面路由 , 两种方法 
    // 1. :to动态绑定对象,name对应routes中的name 
    // 2. to="字符串", 带参数/123对应 routes中的/:id
    <router-link :to="{name: 'app'}">Home</router-link>
    <router-link to="/user/123">User</router-link>
    // 切换时使用transition动画过渡
    <transition name="fade">
      // 路由切换内容存放位置，必须
      <router-view></router-view>
    </transition>
  </div>
</template>

# style部分
<style scope>
    // transition动画过渡样式
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
     }
     .fade-enter, .fade-leave-to {
       opacity: 0;
      }
</style>复制代码

5. 在 入口文件 index.js 添加使用vue-router

import Vue from 'vue'
import App from './app.vue'
import VueRouter from 'vue-router'

import './assets/styles/base.css'
import createRouter from './config/router'

// 使用vue-router
Vue.use(VueRouter)
// 因为 config/router中以export default() => {}函数方式导出， 对应使用时需要()执行
const router = createRouter()

// const root = document.createElement('div')
// document.body.appendChild(root)
new Vue({
  router,
  render: (h) => h(App)
}).$mount('#root')
复制代码

6.  根据/config/routes.js中的 user路由设置参数，可在User.vue中获取相关参数

# User.vue组件 HTML 部分
<template>
  <div class="user">
    this is User page
    <p>{{ this.$route.params.id }}</p> 
    <p>{{ this.$route.params }}</p>
    <p>{{ this.$route.query }}</p>
  </div>
</template># User.vue组件 script部分
<script>
  export default {
    name: 'user',
    props: ['id', 'count'],
    mounted () {
      console.log(this.count)
      console.log(this.id)
      console.log(this.$route)
    }
  }
</script>复制代码

 7. 当在url输入http://localhost:8000/user/123?a=sss&b=ccc后，界面显示如下,

分别使用 {{this.$route.params.id}}, {{ this.$route.params }}, {{ this.$route.query }}获取

同样，由于User.vue组件在routes路由中将参数传给props， 因此可以在组件内的props属性获取参数。

 props: ['id', 'count'],
    mounted () {
      console.log(this.count)
      console.log(this.id)
      console.log(this.$route)
    }复制代码

总结： 

1. 使用vue-router时必须先Vue.use(VueRouter)调用, 然后再new Vue({router})使用配置好的路由规则。 

2. <router-link>和<router-view>组合使用

3. 分配路由规则时必须设置path和component

4.  router-link路由跳转有动态绑定和静态字符串绑定