Vue学习总结-路由

路由-前端路由和后端路由的概念

路由-vue-router的基本使用

import Vue from 'vue'
import VueResource from 'vue-resource'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import About from '../components/About'
import animated from 'animate.css' // npm install animate.css --save安装，再引入


Vue.use(Router)
Vue.use(animated)
Vue.use(VueResource)

export default new Router({
  routes: [
    {
      path: '/About',
      name: 'About',
      component: About
    },
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

路由-router-link的使用

<template>
  <div id="app">
<!--    <a href="#/About">关于</a>-->
<!--    <a href="#/HelloWorld">你好</a>-->
    <router-link to="/About" tag="span">关于</router-link>
    <router-link to="/HelloWorld">你好</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

    import About from "./components/About.vue"
    import HelloWorld from "./components/HelloWorld.vue";

    export default {
        name: 'App',
        data: function () {
            return {}

        },

        methods: {}
    }
</script>

<style scoped>

</style>

路由-路由redirect重定向的使用

export default new Router({
  routes: [
    {
     path:'/',
     redirect: '/About'
    },
    {
      path: '/About',
      name: 'About',
      component: About
    },
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

路由-设置选中路由高亮的两种方式

方式1

<template>
  <div id="app">
<!--    <a href="#/About">关于</a>-->
<!--    <a href="#/HelloWorld">你好</a>-->
    <router-link to="/About" tag="span">关于</router-link>
    <router-link to="/HelloWorld">你好</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

    import About from "./components/About.vue"
    import HelloWorld from "./components/HelloWorld.vue";

    export default {
        name: 'App',
        data: function () {
            return {}

        },

        methods: {}
    }
</script>

<style scoped>
.router-link-active,myActive{
  color: red;
  font-weight: 800;
  font-size: 80px;
  text-decoration: underline;
}
</style>

方式2

import Vue from 'vue'
import VueResource from 'vue-resource'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import About from '../components/About'
import animated from 'animate.css' // npm install animate.css --save安装，再引入


Vue.use(Router)
Vue.use(animated)
Vue.use(VueResource)

export default new Router({
  routes: [
    {
     path:'/',
     redirect: '/About'
    },
    {
      path: '/About',
      name: 'About',
      component: About
    },
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ],
  linkActiveClass:'myActive'       //方式2
})

路由-为路由切换启动动画

<template>
  <div id="app">
<!--    <a href="#/About">关于</a>-->
<!--    <a href="#/HelloWorld">你好</a>-->
    <router-link to="/About" tag="span">关于</router-link>
    <router-link to="/HelloWorld">你好</router-link>
    <transition mode="out-in"
    >
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>

    import About from "./components/About.vue"
    import HelloWorld from "./components/HelloWorld.vue";

    export default {
        name: 'App',
        data: function () {
            return {}

        },

        methods: {}
    }
</script>

<style scoped>
.router-link-active,.myActive{
  color: red;
  font-weight: 800;
  font-size: 80px;
  text-decoration: underline;
}
.v-enter,
.v-leave-to{
  opacity: 0;
  transform: translateX(140px);
}
  .v-enter-active,
  .v-leave-active{
    transition: all 0.5s ease;
  }
</style>

路由传参-使用query方式传递参数

父组件

<router-link to="/HelloWorld?id=10&name='名字'">你好</router-link>

子组件

<h1>登录组件---{{$route.query.id}}---{{$route.query.name}}</h1>

效果：

路由传参-使用params方式传递路由参数

路由：
export default new Router({
  routes: [
    {
      path: '/About',
      name: 'About',
      component: About
    },
    {
      path: '/HelloWorld/:id/:name',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ],
  linkActiveClass:'myActive'
})

父组件传参：
 <div id="app">
<!--    <a href="#/About">关于</a>-->
<!--    <a href="#/HelloWorld">你好</a>-->
<!--    如果在路由中，使用查询字符串，给路由传递参数，不需要修改路由规则的path属性-->
    <router-link to="/HelloWorld/12/'名字'">你好</router-link>
    <router-link to="/About" tag="span">关于</router-link>
    <transition mode="out-in"
    >
      <router-view></router-view>
    </transition>
  </div>

子组件使用：
<h1>登录组件---{{$route.params.id}}--{{$route.params.name}}</h1>

路由-使用children属性实现路由嵌套(未解决)

App.vue

<template>
  <div id="app">
<!--    <el-container>-->
<!--      <el-header>这是APP组件Header</el-header>-->
<!--      <el-main>-->
<!--            <router-link to="HelloWorld">你好</router-link>-->
<!--                <router-link to="About" tag="span">关于</router-link>-->
<!--        <router-view></router-view>-->
<!--      </el-main>-->
<!--    </el-container>-->



  </div>
</template>

<script>

    import About from "./components/About.vue"
    import HelloWorld from "./components/HelloWorld.vue";

    export default {
        name: 'App',
        data: function () {
            return {}

        },

        methods: {}
    }
</script>

<style scoped>
  .router-link-active, .myActive {
    color: red;
    font-weight: 100;
    font-size: 20px;
    text-decoration: underline;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 700px;
  }

  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateX(140px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.5s ease;
  }
</style>

index.js

import Vue from 'vue'
import VueResource from 'vue-resource'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import About from '../components/About'
import App from '../App.vue'
import animated from 'animate.css' // npm install animate.css --save安装，再引入


Vue.use(Router)
Vue.use(animated)
Vue.use(VueResource)

export default new Router({
  routes: [

    // {
    //   path: '/',
    //   name: "App",
    //   redirect: HelloWorld,
    //   component: App,
    //   children:[
    //     { path: 'HelloWorld',name: 'HelloWorld', component: HelloWorld},
    //     { path: 'About', name: 'About',component: About }
    //   ]
    // },
  ],
})

路由-使用命名视图实现经典布局