根据不同的url地址,显示不同的内容,但显示在同一个页面中,称为单页面应用
2.基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../router/vue.js"></script>
<script src="../router/vue-router.js"></script>
<style>
/* .router-link-active {
font-size: 20px;
color: #ff7300;
text-decoration: none;
} */
.active {
font-size: 20px;
color: #ff7300;
text-decoration: none;
}
</style>
</head>
<body>
<div id="item">
<div>
<!--使用router-link组件来定义导航,to属性指定链接url-->
<router-link to="/home">主页</router-link>
<router-link to="/new">新闻</router-link>
</div>
<div>
<!--router-view 用来显示路由内容-->
<router-view></router-view>
</div>
</div>
<script>
// 1.定义组件
var Home = {
template: '<h3>我是主页</h3>'
}
var News = {
template: '<h3>我是新闻</h3>'
}
// 2.配置路由
const routes = [{
path: '/home',
component: Home
}, {
path: '/new',
component: News
}, {
path: '/',
redirect: '/home' // 重定向 输入不存在的或者刚进入时都会先访问home
}
]
// 3. 创建路由实例
const router = new VueRouter({
// routes:routes
//简写 路由中会有一个#
routes,
linkActiveClass: 'active', //更改活动链接的class类名 style
});
// 4.创建根实例并将路由挂载到vue上
new Vue({
el: "#item",
router, //注入路由
})
</script>
</body>
</html>
3. 路由嵌套和参数传递
传参的两种形式:
a.查询字符串:login?name=tom&pwd=123
{{$route.query}}
b.rest风格url: regist/alice/20
{{$route.params}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../router/vue.js"></script>
<script src="../router/vue-router.js"></script>
<style>
/* .router-link-active {
font-size: 20px;
color: #ff7300;
text-decoration: none;
} */
.active {
font-size: 20px;
color: #ff7300;
text-decoration: none;
}
</style>
</head>
<body>
<div id="item">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<template id="user">
<div>
<h3>用户信息</h3>
<ul>
<!--查询字符串传参-->
<router-link to="/user/login?name=tom&pwd=123" tag="li">用户登录</router-link>
<router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>
</ul>
<router-view></router-view>
</div>
</template>
<script>
// 1.定义组件
var Home = {
template: '<h3>我是主页</h3>'
}
var User = {
template: '#user'
}
var Login = {
template: '<h4>用户登录...... 获取参数:{{$route.query}}</h4>'
}
var Regist = {
template: '<h4>用户注册......获取参数:{{$route.params}},{{$route.path}}</h4>'
}
// 2.配置路由
const routes = [{
path: '/home',
component: Home
}, {
path: '/user',
component: User,
children: [{
path: 'login',
component: Login
}, {
path: 'regist/:username/:password',
component: Regist
}]
}, {
path: '/',
redirect: '/home' // 重定向 输入不存在的或者刚进入时都会先访问home
}
]
// 3. 创建路由实例
const router = new VueRouter({
// routes:routes
//简写 路由中会有一个#
routes,
linkActiveClass: 'active', //更改活动链接的class类名 style
});
// 4.创建根实例并将路由挂载到vue上
new Vue({
el: "#item",
router, //注入路由
})
</script>
</body>
</html>
4 .路由实例的方法
router.push() 添加路由,功能上与<route-link>相同
router.replace() 替换路由,不产生历史数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../router/vue.js"></script>
<script src="../router/vue-router.js"></script>
<style>
/* .router-link-active {
font-size: 20px;
color: #ff7300;
text-decoration: none;
} */
.active {
font-size: 20px;
color: #ff7300;
text-decoration: none;
}
</style>
</head>
<body>
<div id="item">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
</div>
<div>
<router-view></router-view>
</div>
<hr>
<button @click="push">添加路由</button>
<button @click="replace">替换路由</button>
</div>
<template id="user">
<div>
<h3>用户信息</h3>
<ul>
<!--查询字符串传参-->
<router-link to="/user/login?name=tom&pwd=123" tag="li">用户登录</router-link>
<router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>
</ul>
<router-view></router-view>
</div>
</template>
<script>
// 1.定义组件
var Home = {
template: '<h3>我是主页</h3>'
}
var User = {
template: '#user'
}
var Login = {
template: '<h4>用户登录...... 获取参数:{{$route.query}}</h4>'
}
var Regist = {
template: '<h4>用户注册......获取参数:{{$route.params}},{{$route.path}}</h4>'
}
// 2.配置路由
const routes = [{
path: '/home',
component: Home
}, {
path: '/user',
component: User,
children: [{
path: 'login',
component: Login
}, {
path: 'regist/:username/:password',
component: Regist
}]
}, {
path: '/',
redirect: '/home' // 重定向 输入不存在的或者刚进入时都会先访问home
}
]
// 3. 创建路由实例
const router = new VueRouter({
// routes:routes
//简写 路由中会有一个#
routes,
linkActiveClass: 'active', //更改活动链接的class类名 style
});
// 4.创建根实例并将路由挂载到vue上
new Vue({
el: "#item",
router, //注入路由
methods: {
push() {
router.push({
path: 'home'
}) // 添加路由,切换路由
},
replace() {
router.replace({
path: 'user'
}) //替换路由 没有历史记录
}
},
})
</script>
</body>
</html>
5.路由结合动画
<transition>
<router-view></router-view>
</transition>
6.单文件组件
1. .Vue文件
.vue文件,称为单文件组件,是vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的:html,css,js
.vue文件由三部分组成:<template>,<style>,<script>
2.vue-loader
浏览器本身并不认识.vue文件,所以必须对.vue文件进行加载解析,此时需要vue.loader。
类似的loader还有很多,如html-loader,style-loader
需要注意的是vue-loader是基于webpack的,webpack是一个工具,想使用vue-loader就必须配置webpack
3.webpack
webpack是一个前端资源模板化加载器和打包工具,它能够把各种资源都作为模块来使用和处理。实际上webpack是通过不同的loader将这些资源加载后打包,然后输出打包后的文件
webpack有一个核心配置文件:webpack.config.js,必须放在项目根目录下
4.实例 步骤
4.1 目录结构
webpack-demo
|.index.html
|.main.js 入口文件
|.App.vue vue文件
|.package.json 工程文件(依赖,配置)
|.webpack.config.js webpack配置文件
|.balelrc Babel配置文件
4.2 编写App.vue
4.3 安装相关模块
cnpm install vue -S
cnpm install webpack -D
cnpm install webpack-dev-server -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D
4.4 编写 main.js
七.vue-cli脚手架
vue-cli是一个vue脚手架,可以快速构架项目结构
vue-cli本身集成了多种项目模板
1.步骤
安装vue-cli,配置vue命令环境
cnpm install vue-cli -g 全局安装
vue --version 查看版本
vue list 查看可以使用的模板
2. 初始化项目 生成项目模板
模板名 项目名
vue init webpack-simple vue-cli-demo
3.进入生成的项目目录,安装模块名
cd vue-cli-demo
cnpm install // 安装依赖
4. 运行项目
npm run dev //启动测试服务
npm run build // 将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上
1. 使用webpack模板
vue init webpack vue-cli-demo
ESLink 是用来同一代码规范和风格的工具,如缩进,空格
全局组件(插件):
就是可以在main.js中使用vue.use()进行全局引入,然后再其他组件中都可以使用了
比如:vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter )
普通组件(插件)
每次使用时都要引入,如axios
import axios from 'axios'