Vue学习笔记04-Vue路由
目录
- Vue学习笔记01-Vue基础
- Vue学习笔记02-Vue组件
- Vue学习笔记03-Axios
- Vue学习笔记04-Vue路由
- Vue学习笔记05-H5实例百度音乐
- Vue学习笔记06-Vuex
- Vue学习笔记07-Web商城实例
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
- 安装element-ui:
npm i element-ui --save
- 安装按需加载的依赖:
npm install babel-plugin-component --save-dev
- 修改.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 "
}
]]
}
- 引入组件(main.js)
import { Button } from 'element-ui'
Vue.use(Button)
- 使用组件
<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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步