...

Vue学习笔记04-Vue路由

目录

Vue路由

18. Vue-路由基础

安装 cnpm install --save vue-router

官方文档:https://router.vuejs.org/zh/

src/main.js中
(1)引入VueRouter:import VueRouter from "vue-router"
(2)使用VueRouter:Vue.use(VueRouter);
(3)创建路由规则

const router = new VueRouter({
    routes: [
        { 
            path: '/hello',
            component: Hello
        }
    ]
});

(4)注入router

new Vue({
  el: '#app', 
  router,  // 添加路由
  components: { App }, 
  template: '<App/>' 
})

(5)App.vue中显示路由组件:<router-view />访问http://localhost:8080/#/hello显示相应视图

也可以使用<router-view></router-view>

示例:
新建src/components/hello.vue

<template>
    <div class="hello">
        Hello
    </div>
</template>

<script>
export default{
    name: 'chachao',
    data(){
        return {
           
        }
    }
}
</script>
<style lang='css'>
</style>

修改src/main.js

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

import VueRouter from "vue-router"   // 引入VueRouter
import Hello from "./components/hello"   // 引入相关组件

Vue.config.productionTip = false 

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        { 
            path: '/hello',
            component: Hello
        }
    ]
});

new Vue({
  el: '#app', 
  router,  // 添加路由
  components: { App }, 
  template: '<App/>' 
})

修改src/App.vue

<template>
  <div id="app">
    <p>哈哈</p>
    <router-view />
  </div>
</template>

<script>
import $ from "jquery"
export default {
  name: 'App',
  data(){
    return {
    }
  }
}
</script>

<style lang="css">

</style>

19. Vue-路由跳转

在组件template中使用 <router-link to="/hello">Hello</router-link>添加跳转连接

示例:

新建src/components/hello.vue

<template>
    <div class="hello">
        Hello组件
    </div>
</template>

<script>
export default{
    name: 'hello',
    data(){
        return {
           
        }
    }
}
</script>
<style lang='css'>
</style>

新建新建src/components/hi.vue

<template>
    <div class="hi">
        Hi组件
    </div>
</template>

<script>
export default{
    name: 'hi',
    data(){
        return {
           
        }
    }
}
</script>
<style lang='css'>
</style>

src/main.js中配置路径

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

import VueRouter from "vue-router"   // 引入VueRouter
import Hello from "./components/hello"   // 引入相关组件
import Hi from "./components/hi"   // 引入相关组件

Vue.config.productionTip = false 

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        { 
            path: '/hello',
            component: Hello
        },
        { 
            path: '/hi',
            component: Hi
        },
    ]
});

new Vue({
  el: '#app', 
  router,  // 添加路由
  components: { App }, 
  template: '<App/>' 
})

src/App.vue中使用

<template>
  <div id="app">
    <div class="nav">
        <ul>
            <li>
                <router-link to="/hello">Hello</router-link>
            </li>
            <li>
                <router-link to="/hi">Hi</router-link>
            </li>
        </ul>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
    }
  }
}
</script>

<style lang="css">

</style>

路由模块化处理

将src/main.js中路由相关的配置移动到src/router/index.js中
(1)src下新建router文件夹,新建src/router/index.js:

import Vue from 'vue'
import VueRouter from "vue-router"

import Hello from "../components/hello"   //改为两个..
import Hi from "../components/hi"   //改为两个..


Vue.use(VueRouter);

export default new VueRouter({   // 改为export default以使其可外部访问
    routes: [
        { 
            path: '/hello',
            component: Hello
        },
        { 
            path: '/hi',
            component: Hi
        },
    ]
});

(2)src/main.js改为

import Vue from 'vue'
import App from './App'
import router from './router'  // 自动导入该目录中的index.js


Vue.config.productionTip = false 

new Vue({
  el: '#app', 
  router,  // 添加路由
  components: { App }, 
  template: '<App/>' 
})

(3)src/components/hello.vue,src/components/hi.vue,src/App.vue配置同上

也可以新建src/components/nav.vue来引入hello和hi组件

<template>
    <div class="nav">
        <ul>
            <li>
                <router-link to="/hello">Hello</router-link>
            </li>
            <li>
                <router-link to="/hi">Hi</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default{
    name: 'nav2',
    data(){
        return {
           
        }
    },
}
</script>
<style lang='css'>
.nav{
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #fff;
}
.nav ul {
    clear: both;
    overflow: hidden;
}

.nav ul li {
    float: left;
    margin-left: 30px;
    list-style: none;
}
</style>

修改App.vue导入Nav组件

<template>
  <div id="app">
    <Nav/>
    <router-view/>
  </div>
</template>

<script>
import Nav from "./components/nav"
export default {
  name: 'App',
  data(){
    return {
    }
  },
  components: {
        Nav
    }
}
</script>

<style>
  body{
    background-color: #f1f1f1;
  }

  *{
    margin: 0;
    padding: 0;
  }
</style>

比起写死的 会好一些,理由如下:

  • 无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
  • 在 HTML5 history 模式下,router-link 会守卫点击事件,让浏览器不再重新加载页面。
  • 当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写 (基路径) 了。

router-link可以指定渲染的标签,默认为a标签

<router-link tag="li" to="hello">Hello</router-link>

配置默认重定向到的页面

routes配置中添加

{ path: '/', redirect: '/hello'  },

src/router/index.js,完整代码:

import Vue from 'vue'
import VueRouter from "vue-router"

import Hello from "../components/hello"   //改为两个..
import Hi from "../components/hi"   //改为两个..


Vue.use(VueRouter);

export default new VueRouter({   // 改为export default以使其可外部访问
    routes: [
        { path: '/', redirect: '/hello'  },   // 配置默认重定向到hello组件视图
        { path: '/hello', component: Hello },
        { path: '/hi', component: Hi },
    ]
});

20. Vue-路由嵌套

在路由配置router中可以使用children添加嵌套路由。

{ path: '/hello', 
  component: Hello, 
  redirect: '/hello/hello1',   // Hello充电线到/hello/hello1
  children:[      // 添加嵌套路由
    {path: 'hello1', component: Hello1},
    {path: 'hello2', component: Hello2},
    ]
}

在router-link中连接子路由要使用全路径

<ul>
    <li><router-link to="/hello/hello1">Hello1</router-link></li>
    <li><router-link to="/hello/hello2">Hello2</router-link></li>
</ul>
<router-view/>

示例:
新建src/components/hello1.vue

<template>
    <div class="hello1">
        Hello1组件
    </div>
</template>

<script>
export default{
    name: 'hello1',
    data(){
        return {
           
        }
    }
}
</script>
<style lang='css'>
</style>

新建src/components/hello2.vue

<template>
    <div class="hello2">
        Hello2组件
    </div>
</template>

<script>
export default{
    name: 'hello2',
    data(){
        return {
           
        }
    }
}
</script>
<style lang='css'>
</style>

编辑src/routeindex.js

import Vue from 'vue'
import VueRouter from "vue-router"

import Hello from "../components/hello"   //改为两个..
import Hi from "../components/hi"   //改为两个..
import Hello1 from "../components/hello1"
import Hello2 from "../components/hello2"

Vue.use(VueRouter);

export default new VueRouter({   // 改为export default以使其可外部访问
    routes: [
        { path: '/', redirect: '/hello'  },   // 配置默认重定向到hello组件视图
        { path: '/hello', component: Hello, redirect: '/hello/hello1',   // Hello充电线到/hello/hello1
        children:[      // 添加嵌套路由
            {path: 'hello1', component: Hello1},
            {path: 'hello2', component: Hello2},
        ]},
        { path: '/hi', component: Hi },
    ]
});

编辑src/components/hello.vue

<template>
    <div class="hello">
        Hello组件
        <ul>
            <li><router-link to="/hello/hello1">Hello1</router-link></li>
            <li><router-link to="/hello/hello2">Hello2</router-link></li>
        </ul>
        <router-view/>
    </div>
</template>

<script>
export default{
    name: 'hello',
    data(){
        return {
           
        }
    }
}
</script>
<style lang='css'>
</style>

21. Vue-路由参数传递

router-link

<router-link to="/hi">Hi</router-link>

也可以写为

<router-link v-bind:to='{ path: "/hi"}'>Hi</router-link>

(1)配置理由信息:route中为路由添加name和参数

{ path: '/hi/:id/:count', component: Hi, name: 'hi'},

(2)配置路径调整信息

<router-link v-bind:to='{ name: "hi", params: {id: "100", count: "10"}}'>Hi</router-link> 

(3)读取信息

{{ $route.params.id }}

示例:
修改src/route/index.js

import Vue from 'vue'
import VueRouter from "vue-router"

import Hello from "../components/hello"   //改为两个..
import Hi from "../components/hi"   //改为两个..


Vue.use(VueRouter);

export default new VueRouter({   // 改为export default以使其可外部访问
    routes: [
        { path: '/', redirect: '/hello'  },   // 配置默认重定向到hello组件视图
        { path: '/hello', component: Hello},
        { path: '/hi/:id/:count', component: Hi, name: 'hi'},   //添加name和参数id和count
    ]
});

修改src/components/nav.vue

<template>
    <div class="nav">
        <ul>
            <li>
                <router-link to="/hello">Hello</router-link>
            </li>
            <li>
                <!-- <router-link to="/hi">Hi</router-link> -->
                <!-- <router-link v-bind:to='{ path: "/hi"}'>Hi</router-link> -->
                <router-link v-bind:to='{ name: "hi", params: {id: "100", count: "10"}}'>Hi</router-link>   <!--使用参数-->
            </li>
        </ul>
    </div>
</template>

<script>
export default{
    name: 'nav2',
    data(){
        return {
           
        }
    },
}
</script>
<style lang='css'>
</style>

修改src/components/h1.vue

<template>
    <div class="hi">
        Hi组件:
        {{ $route.params.id }} - {{ $route.params.count }}
    </div>
</template>

<script>
export default{
    name: 'hi',
    data(){
        return {
           
        }
    }
}
</script>
<style lang='css'>
</style>

22. Vue-路由高亮

可以通过对router-link-active设置样式实现高亮

.router-link-active{
color: red !important;
}

可以在VueRouter中使用linkActiveClass: "active"设置active类并添加属性

还可以通过mode: "history"设置历史模式

示例:
src/route/index.js

import Vue from 'vue'
import VueRouter from "vue-router"

import Hello from "../components/hello"   //改为两个..
import Hi from "../components/hi"   //改为两个..
import Hello1 from "../components/hello1"
import Hello2 from "../components/hello2"
Vue.use(VueRouter);
export default new VueRouter({   // 改为export default以使其可外部访问
    linkActiveClass: "active",
    mode: "history",   // 使用历史模式
    routes: [
        { path: '/', redirect: '/hello'  },   // 配置默认重定向到hello组件视图
        { path: '/hello', component: Hello, redirect: '/hello/hello1',   // Hello充电线到/hello/hello1
        children:[      // 添加嵌套路由
            {path: 'hello1', component: Hello1},
            {path: 'hello2', component: Hello2},
        ]},
        { path: '/hi/:id/:count', component: Hi, name: 'hi'},   //添加name和参数id和count
    ]
});

src/App.vue中

<template>
  <div id="app">
    <Nav/>
    <router-view/>
  </div>
</template>

<script>
import Nav from "./components/nav"
export default {
  name: 'App',
  data(){
    return {
    }
  },
  components: {
        Nav
    }
}
</script>

<style>
  body{
    background-color: #f1f1f1;
  }

  *{
    margin: 0;
    padding: 0;
  }
  a:link,a:hover,a:active,a:visited{
    color: blue;
  }
 /* .router-link-active{
    color: red !important;
  }*/
  .active{
    color: red !important;
  }
</style>

23. Vue-element-ui组件

官方文档:https://element.eleme.cn/#/zh-CN/component/installation

  1. 安装element-ui: npm i element-ui --save
  2. 安装按需加载的依赖: npm install babel-plugin-component --save-dev
  3. 修改.babelrc
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk "
      }
    ]]
}
  1. 引入组件(main.js)
import { Button } from 'element-ui'
Vue.use(Button)
  1. 使用组件
<el-button type="primary">主要按钮</el-button>


npm install -d 就是npm install --save-dev
npm insatll -s 就是npm install --save
使用 --save-dev 安装的 插件,被写入到 devDependencies 域里面去,而使用 --save 安装的插件,则是被写入到 dependencies 区块里面去。

问题: throttle-debounce/throttle 安装不上 --未出现
presets中添加["es2015", { "modules": false }] 会报错

示例:
src/main.js

import Vue from 'vue'
import App from './App'
import { Button, Select, Option, Steps, Step } from 'element-ui'  // 按需导入

Vue.use(Button)
Vue.use(Select)
Vue.use(Option)
Vue.use(Steps)
Vue.use(Step)

Vue.config.productionTip = false 

new Vue({
  el: '#app', 
  components: { App }, 
  template: '<App/>' 
})

src/App.vue

<template>
  <div id="app">
    <el-button type="primary">主要按钮</el-button>
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <br/>
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>

    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      active: 0,
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
    }
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    }
  }
  
}
</script>
<style>
</style>

24. Vue-常用组件swiper

swiper常用于移动端网站的内容触摸滑动
官网文档:https://github.surmon.me/vue-awesome-swiper/
中文文档:https://www.swiper.com.cn/api/

安装:npm install --save vue-avesome-swiper

(1)main.js中引入swipper

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

(2)组件中使用

<swiper :options="swiperOption" class="hello">
  <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
    <p>{{ slide.title }}</p>
    <p>{{ slide.type }}</p>
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
</swiper>

(3)选项设置

data() {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        navigation: {   // 配置左右按钮可点
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
      swiperSlides: [],
    }
  },

示例:
src/main.js

import Vue from 'vue'
import App from './App'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import Axios from 'axios'

import 'swiper/dist/css/swiper.css'

Vue.prototype.$axios = Axios;  // 不使用 Vue.use(Axios),而是绑定原型

Vue.use(VueAwesomeSwiper)

// Axios.defaults.baseURL = 'https://httpbin.org'

Vue.config.productionTip = false 

new Vue({
  el: '#app', 
  components: { App }, 
  template: '<App/>' 
})

src/App.vue

<template>
  <div id="app">
    <swiper :options="swiperOption" class="hello">
      <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
        <p>{{ slide.title }}</p>
        <p>{{ slide.type }}</p>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        navigation: {   // 配置左右按钮可点
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
      swiperSlides: [],
    }
  },
  mounted() {
    this.$axios.get('https://httpbin.org/json')
    .then(res => {
      console.log(res.data.slideshow.slides)
      this.swiperSlides = res.data.slideshow.slides;
    })
    .catch(error =>{console.log(error)})
    // setInterval(() => {
    //   console.log('simulate async data')
    //   if (this.swiperSlides.length < 10) {
    //     this.swiperSlides.push(this.swiperSlides.length + 1)
    //   }
    // }, 3000)
  }
}
</script>

<style>
  .hello {
    width: 600px;
    height: 400px;
    background-color: #f1f1f1;
  }
</style>
posted @   韩志超  阅读(402)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示