什么是路由
-
对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
-
对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
-
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；
在 vue 中使用 vue-router
-
导入 vue-router 组件类库：
<!-- 1\. 导入 vue-router 组件类库 --> <script src="./lib/vue-router-2.7.0.js"></script> -
使用 router-link 组件来导航
<!-- 2\. 使用 router-link 组件来导航 --> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> -
使用 router-view 组件来显示匹配到的组件
<!-- 3\. 使用 router-view 组件来显示匹配到的组件 --> <router-view></router-view> -
创建使用
Vue.extend创建组件// 4.1 使用 Vue.extend 来创建登录组件 var login = Vue.extend({ template: '<h1>登录组件</h1>' }); // 4.2 使用 Vue.extend 来创建注册组件 var register = Vue.extend({ template: '<h1>注册组件</h1>' }); -
创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
// 5\. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则 var router = new VueRouter({ routes: [ { path: '/login', component: login }, { path: '/register', component: register } ] }); -
使用 router 属性来使用路由规则
// 6\. 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', router: router // 使用 router 属性来使用路由规则 });
设置路由高亮
<style>
//默认选中 <router-link> 的类.router -link-active,可以修改样式实现选中高亮显示
//可以自己设置类名 linkActiveClass :'myactive'
.router-link-active {
color: red;
font-weight :800;
font-style: italic;
font-size: 80px;
text- decoration: underline ;
background-color: green;
}
</style>
设置路由切换动效
<transition mode="out-in">
<router-view><router-view>
</transition>
//样式
. v-enter，.v-leave-to {
opacity: 0;
transform: translatex (140px) ;
}
，V-enter-active, . v-leave-active {
transition: a11 0.5s ease ;
}
路由传参
引言
我们的地址一般都是带参数的，比如：
image
这就涉及到路由传参问题
一般来说，路由传参有以下几种方式：
- 通过设置path
- 通过name
- 通过<router-link> 标签中的to传参
一：通过设置path值
传递一个参数
-
回到苹果的路由设置页（Router下的index.js页），给苹果的path添加
/:color，这样就能在地址栏传递参数了，比如传递red，green
image
-
在apple.vue页面中添加内容如下：
image
-
访问地址栏我们可以看到：
image
-
注意一个问题：在演示中，当地址为
http://localhost:8080/#/apple时，是不出现东西的。我们必须给他传递参数，才会出来正确的页面
传递任意个参数
除了能传递一个参数外，也可以传递好几个参数，比入：传入俩参数
-
将Router下的index.js页改为：
image
-
apple.vue改为获取两个参数
image
-
地址栏只需改为：
image
二：通过name传递
这里的name就是index.js里配置路由的name
image
在App.vue中，添加获取name的方法
image
但是，这种方法很奇怪，而且不实用
三：通过<router-link> 标签中的to传参
基本语法：
<router-link :to="{name:xxx,params:{key:value}}">[名称]</router-link>
- to前面带：
- params就是传递的参数，对象形式，可以传递多个值
新增葡萄页面，内容与苹果相似
image
动态路由传参
为什么有路由组件传参
如果用$route的方法，会导致它与对应的路由有高度的耦合（也就是说，$route的组件传参方法也行，就是与组件的耦合度会高），耦合度高使得组件只能在某些特定的URL上使用，限制了其灵活性。
如何解决$route耦合度高的问题
路由组件传参
路由组件传参能干什么
获取路由参数，在页面中做一些逻辑处理
vue路由组件传参有三种方式：
- 1、布尔方式
- 2、对象方式
- 3、函数方式
1、布尔方式
布尔方式适用于有动态路由参数的情况
举个栗子：
router:
{
path: '/argu/:name', // 动态参数
name: 'argu', // 命名路由
component: ()=>import('@/views/Argu.vue'), // 懒加载组件，用到再加载
props: true, // 路由传参，会将name传递过去
}
component:
<template>
<div>
<!-- 获取动态参数的方法之一：耦合度高 -->
{{ $route.params.name }}
<!-- 获取动态参数的方法之二：耦合度低 -->
{{ name }}
</div>
</template>
<script>
export default {
// 动态路由传参
props: {
name: {
type: [String,Number],
default: 'xiaoming'
}
}
}
</script>
test:
http://localhost:8080/#/argu/aaa
将props设置为true，route.params将会设置为组件属性
2、对象方式
对象方式适合普通路由传参的情况
router:
{
path: '/about',
name: 'about',
component: () => import('@/views/About.vue'),
// 对象方式传参
props: {
food: "apple"
}
}
component:
{{ food }}
props: {
food: {
type: String,
default: 'babana'
}
}
</script>
test:
http://localhost:8080/#/about
3、函数方式
创建一个函数，返回props
router:
{
path: '/',
name: "home",
alias: 'home_page',
component: Home,
props: route=>({
food: route.query.food
})
},
component:
{{ food }}
props: {
food: {
type: String,
default: "orange"
}
},
test:
http://localhost:8080/#/?food=orr
使用 children 属性实现路由嵌套
<div id="app">
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div>
<script>
// 父路由中的组件
const account = Vue.extend({
template: `<div>
这是account组件
<router-link to="/account/login">login</router-link> |
<router-link to="/account/register">register</router-link>
<router-view></router-view>
</div>`
});
// 子路由中的 login 组件
const login = Vue.extend({
template: '<div>登录组件</div>'
});
// 子路由中的 register 组件
const register = Vue.extend({
template: '<div>注册组件</div>'
});
// 路由实例
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/account/login' }, // 使用 redirect 实现路由重定向
{
path: '/account',
component: account,
children: [ // 通过 children 数组属性，来实现路由的嵌套
{ path: 'login', component: login }, // 注意，子路由的开头位置，不要加 / 路径符,否则永远以根路径开始请求
{ path: 'register', component: register }
]
}
]
});
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
account
},
router: router
});
</script>
<router-link>组件
<router-link>组件支持路由导航功能。
一：首先看一个栗子：
<router-link :to='/Home' replace tag="li" active-class="active" exact>Home</router-link>
这个栗子表示一个<li>标签，点击时跳转到Home组件中，并且不会留下历史跳转记录，并且开启router-link严格模式
二：详细讲解router-link组件的props：
- to：目标路由的链接，相当于a标签的href属性；必须；调用的是router.push()方法，将to的值传入router.push()里
<router-link :to='/Home'>Home</router-link>
渲染结果：
<a href="Home">Home</a>
<router-link :to="{ path: 'register', query: { name: 'fjw' }}">router</router-link>
渲染结果：
<a href="/register?name=fjw">router</a>
- tag：指定<router-link>组件最终被渲染成什么标签；非必须；如果没有tag属性，router-link最终会被渲染成a标签。在上面的栗子中，渲染成了li标签。
<router-link :to='/Home' tag="li" >Home</router-link>
渲染结果：
<li>Home</li>
此时依旧会监听点击事件，触发导航
-
replace：调用router.replace()，页面切换时不会留下历史记录；非必须。
-
active-class：表示激活这个链接时，添加的class，默认是router-link-class
-
exact：表示开启router-link的严格模式
watch属性的使用
考虑一个问题：想要实现 名 和 姓 两个文本框的内容改变，则全名的文本框中的值也跟着改变；（用以前的知识如何实现？？？）
-
监听
data中属性的改变：<div id="app"> <input type="text" v-model="firstName"> + <input type="text" v-model="lastName"> = <span>{{fullName}}</span> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { firstName: 'jack', lastName: 'chen', fullName: 'jack - chen' }, methods: {}, watch: { 'firstName': function (newVal, oldVal) { // 第一个参数是新数据，第二个参数是旧数据 this.fullName = newVal + ' - ' + this.lastName; }, 'lastName': function (newVal, oldVal) { this.fullName = this.firstName + ' - ' + newVal; } } }); </script> -
监听路由对象的改变：
<div id="app"> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> <router-view></router-view> </div> <script> var login = Vue.extend({ template: '<h1>登录组件</h1>' }); var register = Vue.extend({ template: '<h1>注册组件</h1>' }); var router = new VueRouter({ routes: [ { path: "/login", component: login }, { path: "/register", component: register } ] }); // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, router: router, watch: { '$route': function (newVal, oldVal) { if (newVal.path === '/login') { console.log('这是登录组件'); } } } }); </script>
computed计算属性的使用
```
<div id="app">
<input type="text" v-model="firstName"> +
<input type="text" v-model="lastName"> =
<span>{{fullName}}</span>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen'
},
methods: {},
computed: { // 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
fullName() {
return this.firstName + ' - ' + this.lastName;
}
}
});
</script>
```
watch、computed和methods之间的对比
-
computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用； -
methods方法表示一个具体的操作，主要书写业务逻辑； -
watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；
nrm的安装使用
作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址； 什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样；
- 运行
npm i nrm -g全局安装nrm包； - 使用
nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址； - 使用
nrm use npm或nrm use taobao切换不同的镜像源地址；
注意: nrm只是单纯的提供了几个常用的下载包的URL地址，并能够让我们在这几个地址之间，很方便的进行切换，但是，我们每次装包的时候，使用的装包工具，都是npm
网友评论