地址：
入门 | Vue Router
一、导入vuerouter依赖包
注意，一定要先引入vue，再引入vue-router（引入vue在引入vue-router的上面）。不然会报错
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js" type="text/javascript"></script>
</head>注意点：如果在html页面中使用vuerouter 在使用script引入的时候 一定要放在vue下面
二、vuerouter的基本使用
为啥使用路由：
通过单页面实现一个网站。多个不同的请求，展示的是同一个页面内的不同组件，但是本质是同一个页面。
实现路由的步骤：
第一步：定义展示页面内容的组件
<script type="text/javascript">
// 定义组件样式
// 登录页面的组件
const loginpage = {template:`<h1>-----首页--------</h1>`}
// 首页组件
const homepage = {template:`<h1>===登录页===</h1>`}
</script>
第二步：定义路由匹配规则
定义一些路由 ,每个路由都需要映射到一个组件。
// 定义路由规则
const routes = [
{path:'/',component: homepage },
{path:"/loginpage",component: loginpage},
]
第三步：初始化路由对象,创建一个路由对象,创建路由实例并传递 `routes` 配置
// 创建一个路由对象,创建路由实例并传递 `routes` 配置
const router = new VueRouter({
routes, // `routes: routes` 的缩写
})
第四步：将路由对象绑定到vue实例中去
var vm = new Vue({
el: '#app',
// 将路由对象绑定到vue实例中
router
});
第五步：在根组件中定义路由视图的展示位置
<div id="app">
<!-- <router-link to="/home">主页</router-link> -->
<!-- <router-link to="/login">登录</router-link> -->
<!-- 路由视图 -->
<router-view></router-view>
</div>
整体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<router-link to="/home">主页</router-link>
<router-link to="/login">登录</router-link>
<!-- 路由视图 -->
<router-view></router-view>
</div>
<script type="text/javascript">
// 定义组件样式
// 登录页面的组件
const homepage = {template:`<h1>-----首页--------</h1>`}
// 首页组件
const loginpage = {template:`<h1>===登录页===</h1>`}
// 定义路由规则
const routes = [
{path:'/home',component: homepage },
{path:'/login',component: loginpage},
]
// 创建一个路由对象,创建路由实例并传递 `routes` 配置
const router = new VueRouter({
routes, // `routes: routes` 的缩写
})
var vm = new Vue({
el: '#app',
// 将路由对象绑定到vue实例中
router
});
</script>
</body>
</html>三、声明式路由&编程式路由
声明式
点击link之后，直接跳转路由
<router-link :to="...">编程式
经过函数逻辑处理，函数里面调用跳转路由的方法
router.push(...)3.1 举例：声明式路由使用
整体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<router-link to="/home">
<button type="button">首页</button>
</router-link>
<router-link to="/login">
<button type="button">登录</button>
</router-link>
<!-- 路由视图 -->
<router-view></router-view>
</div>
<script type="text/javascript">
// 定义组件样式
// 登录页面的组件
const homepage = {template:`<h1>-----首页--------</h1>`}
// 首页组件
const loginpage = {template:`<h1>===登录页===</h1>`}
// 定义路由规则
const routes = [
{path:'/home',component: homepage },
{path:'/login',component: loginpage},
]
// 创建一个路由对象,创建路由实例并传递 `routes` 配置
const router = new VueRouter({
routes, // `routes: routes` 的缩写
})
var vm = new Vue({
el: '#app',
// 将路由对象绑定到vue实例中
router
});
</script>
</body>
</html>3.2 举例：编程式路由使用
// 编程式路由
//跳转到另外一个页面
this.$router.push('/loginsuccess') 整体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js" type="text/javascript"></script>
<!-- 引入elementUI -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div class="box" style="width: 600px;height: 400px; margin:100px auto;text-align: center;">
<el-card class="box-card">
<h1> 用户登录</h1>
<el-form ref="formLogin" :model="formLogin" label-width="80px">
<el-form-item label="账号">
<el-input v-model="formLogin.user"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="formLogin.pwd" type='password'></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginHandle">点击登录</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
<!-- 路由视图 -->
<router-view></router-view>
</div>
<script type="text/javascript">
// 定义组件样式
// 登录页面的组件
const homepage = {template:`<h1>-----首页--------</h1>`}
// 首页组件
const loginpage = {template:`<h1>===登录页===</h1>`}
// 登录成功页面
const loginsuccess = {template:`<h1>===欢迎你登录成功===</h1>`}
// 定义路由规则
const routes = [
{path:'/home',component: homepage },
{path:'/login',component: loginpage},
{path:'/loginsuccess',component: loginsuccess },
]
// 创建一个路由对象,创建路由实例并传递 `routes` 配置
const router = new VueRouter({
routes, // `routes: routes` 的缩写
})
var vm = new Vue({
el: '#app',
// 将路由对象绑定到vue实例中
data: {
formLogin: {
user: 'miaojiang',
pwd: '123456'
},
projects: [],
},
methods: {
// 点击登录之后，处理登录的方法
loginHandle: async function() {
// 请求登录接口
console.log('请求登录接口')
if(this.formLogin.user=='miaojiang'){
if(this.formLogin.pwd=='123456'){
console.log('登录成功')
// 编程式路由
//跳转到另外一个页面
this.$router.push('/loginsuccess')
}
}
}
},
router,
});
</script>
</body>
</html>输入账号密码miaojiang 123456，点击登录时
调用
跳转路由 '/loginsuccess'
3.2.1 编程式路由，跳转时传递参数
1、路由跳转时，传递一个对象
// 编程式路由
//跳转到另外一个页面
this.$router.push({
name:'user',
params: {
id: this.formLogin.user
},
}) 2、跳转后到的组件，接收对象
{{ $route.params.id }}如：
// 登录成功页面
const loginsuccess = {template:`<h1>===欢迎{{ $route.params.id }}登录成功===</h1>`}整体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js" type="text/javascript"></script>
<!-- 引入elementUI -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div class="box" style="width: 600px;height: 400px; margin:100px auto;text-align: center;">
<el-card class="box-card">
<h1> 用户登录</h1>
<el-form ref="formLogin" :model="formLogin" label-width="80px">
<el-form-item label="账号">
<el-input v-model="formLogin.user"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="formLogin.pwd" type='password'></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginHandle">点击登录</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
<!-- 路由视图 -->
<router-view></router-view>
</div>
<script type="text/javascript">
// 定义组件样式
// 登录页面的组件
const homepage = {template:`<h1>-----首页--------</h1>`}
// 首页组件
const loginpage = {template:`<h1>===登录页===</h1>`}
// 登录成功页面
const loginsuccess = {template:`<h1>===欢迎{{ $route.params.id }}登录成功===</h1>`}
// 定义路由规则
const routes = [
{path:'/home',component: homepage },
{path:'/login',component: loginpage},
{path:'/loginsuccess/:id',component: loginsuccess,name: 'user'},
]
// 创建一个路由对象,创建路由实例并传递 `routes` 配置
const router = new VueRouter({
routes, // `routes: routes` 的缩写
})
var vm = new Vue({
el: '#app',
// 将路由对象绑定到vue实例中
data: {
formLogin: {
user: 'miaojiang',
pwd: '123456'
},
projects: [],
},
methods: {
// 点击登录之后，处理登录的方法
loginHandle: async function() {
// 请求登录接口
console.log('请求登录接口')
if(this.formLogin.user=='miaojiang'){
if(this.formLogin.pwd=='123456'){
console.log('登录成功')
// 编程式路由
//跳转到另外一个页面
this.$router.push({
name:'user',
params: {
id: this.formLogin.user
},
})
}
}
}
},
router,
});
</script>
</body>
</html>
