vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865
vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293
vue笔记(3)动画：https://blog.csdn.net/qq_43537987/article/details/93403565
vue笔记(4)组件化：https://blog.csdn.net/qq_43537987/article/details/93403973
vue笔记(5)ref的使用https://blog.csdn.net/qq_43537987/article/details/93404091
路由
什么是路由
- **后端路由：**对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
- **前端路由：**对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
- 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；
vue-router
https://router.vuejs.org/installation.html#direct-download-cdn
安装
直接下载并引入
- 注意先后顺序
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
-
引入vue-router.js后，网页的url显示就会增加#/
http://localhost:63342/练习/vue/vue-router.html?_ijt=5ouqg8uuqv5i32kh2fqf57qedv#/
npm
npm install vue-router
与模块系统一起使用时，必须通过Vue.use()以下方式显式安装路由器：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
使用全局脚本标记(直接下载引入)时不需要执行此操作
vue-router的使用（包含router-view）
-
1.引入vue-router路由模块
<script src="js/vue-2.4.0.js"></script> <script src="js/vue-router.js"></script> -
2.创建一个路由对象
-
当导入vue-router包之后，在window全局对象中，就有了一个路由构造函数VueRouter
-
在new路由对象的时候，可以为构造函数传递一个配置对象
-
对象用route表示，在其中匹配路由规则
- 每个路由规则，都是一个对象，该对象上必须有两个属性
- 属性1：path,表示监听哪个路由地址
- 属性2：component,表示当路由是前面显示 的path时显示对应 的组件
-
注意：component属性值必须是一个组件模板对象，不能是组件的引用名称
-
//错误写法 Vue.component('login',{ template:'<h1>登录</h1>' }) //正确写法 var login = { template: '<h1>登录</h1>' }
创建路由对象：
var routerObj = new VueRouter({ routes: [{ path: '/login', component: login }, { path: '/register', component: register } ] }); -
-
3.将路由规则对象注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件
router: routerObj
- 4.使用
<router-view>显示对应的路由组件- router-view是vue-router提供的元素，专门用来当做占位符，将来把路由规则匹配到的组件展示到router-view中去
<div id="app">
<router-view></router-view>
</div>
-
5.点击链接显示对应组件时，url要加上#
<a href="#/login">登录</a> <a href="#/register">注册</a>
vue-router案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue-2.4.0.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<div id="app">
<router-view></router-view>
</div>
<script>
var login = {
template: '<h1>登录</h1>'
}
var register = {
template: '<h1>注册</h1>'
}
var routerObj = new VueRouter({
routes: [{
path: '/login', component: login
}, {
path: '/register', component: register
}
]
});
var vm = new Vue({
el: '#app',
router: routerObj
})
</script>
</body>
</html>
router-link的使用
解决a链接地址总写#/麻烦的问题
<!--<a href="#/register">注册</a>
<a href="#/login">登录</a>-->
<div id="app">
<router-link to="/login" tag="p">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
- 之前a可以写外面，现在得写在#app内
to属性
指定连接诶地址
tag属性
link-router默认是一个a标签
想要修改改变其tag属性即可，依旧可以点击
路由中的重定向redirect
这里的重定向和node的重定向完全是两码事
这里的含义是，当访问/时，直接跳转到/login
routes: [{
path: '/', redirect: '/login'
},
{
path: '/login', component: login
}, {
path: '/register', component: register
}
]
设置选中路由的高亮显示
被选中的路由默认有这两个class类。
/* .router-link-exact-active{
color:red;
}*/
.router-link-active {
color:red;
}
问？这两个类哪来的？
active-class
-
类型：
string -
默认：
"router-link-active"配置链接处于活动状态时应用的活动CSS类。请注意，也可以通过
linkActiveClass路由器构造函数选项全局配置默认值。
修改类名 => linkActiveClass => 针对.router-link-active，对.router-link-exact-active无影响
var routerObj = new VueRouter({
routes: [{path: '/', redirect: '/login'}],
linkActiveClass:'myClass'
});
<style>
.myClass {
color:red;
}
</style>
添加动画
<transition mode="out-in">
<router-view></router-view>
</transition>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(100px);
}
.v-enter-active,
.v-leave-active {
transition:all 1s ease;
}
路由传递参数
路由传递参数方式1
- /login?id=10&name=zs
- 如果在路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则的path属性
- this.$route.query.id
- {{$route.query.name}}
<div id="app">
<router-link to="/login?id=10&name=zs">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
//插值表达式不需要加this
template: '<div><h1>登录</h1>id--------{{$route.query.id}}\n' +
' name--------{{$route.query.name}}</div>',
//组件中生命周期的钩子函数
created(){
console.log(this.$route.query.id);
console.log(this.$route.query.name);
},
}
var register = {
template: '<h1>注册</h1>'
}
var routerObj = new VueRouter({
routes: [
{
path: '/login',
component: login
},
{
path: '/register',
component: register
}
]
})
var vm = new Vue({
el:'#app',
data:{},
router:routerObj
})
</script>
路由传递参数方式2
- /login/10/zs
- 修改path
- this.$route.params.id
- path:’/login/:id/:name’
<div id="app">
<router-link to="/login/10/zs">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template:'<h1>这是登录组件</h1>',
created(){
console.log(this.$route.params.id)
}
}
var register = {
template:'<h1>这是注册组件</h1>'
}
var routerObj = new VueRouter({
routes:[{
path:'/login/:id/:name',
component:login
}, {
path:'/register',
component:register
}
]
})
var vm = new Vue({
el:'#app',
router:routerObj,
})
</script>
路由的嵌套
- 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
children:[
{path:‘login’,component:login},
{path:‘register’,component:register}
]
-
父路由连接到子路由的路径最好加上父路径
<router-link to="/container/login">登录</router-link> -
在父路由里面在加
<router-view>
<div id="app">
<router-link to="/container">container</router-link>
<router-view></router-view>
</div>
<template id="tem">
<div>
<h1>这是父路由</h1>
<router-link to="/container/login">登录</router-link>
<router-link to="/container/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
var container = {
template: '#tem',
}
var login = {
template: '<h1>登录</h1>'
}
var register = {
template: '<h1>注册</h1>'
}
var router = new VueRouter({
routes: [
{
path: '/container',
component: container,
children:[
{path:'login',component:login},
{path:'register',component:register}
]
},
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
路由- 命名视图实现经典布局
-
components
routes:[{ path:'/',components:{ default:header,//默认 left:left, main:main } }] -
name属性
<router-view name="left"></router-view>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue-2.4.0.js"></script>
<script src="js/vue-router.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.header {
height:100px;
background: orange;
}
.left,.main {
float: left;
height: 600px;
}
.left{
width: 30%;
background-color: lightgreen;
}
.main{
width: 70%;
background-color: lightpink;
}
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
<script>
var header = {
template:'<h1 class="header">header</h1>'
}
var left = {
template:'<h1 class="left">left</h1>'
}
var main = {
template:'<h1 class="main">main</h1>'
}
var router = new VueRouter({
routes:[{
path:'/',components:{
default:header,//默认
left:left,
main:main
}
}]
})
var vm = new Vue({
el:'#app',
router
})
</script>
</body>
</html>
扫一扫
196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
