路由跳转的显示
通过事件跳转
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <button @click="a">query 传值</button> -->
<div id="app">
<!-- <button @click="this.$router.push('/')">首页</button> -->
<button @click="t">首页</button>
<button @click="a">a</button>
<button @click="b">b</button>
<!-- to默认为/ -->
<!-- <router-link to="/a1">A</router-link> -->
<!-- <router-link to="/a2">B</router-link> -->
<el-card>路由展现区
<router-view />
</el-card>
</div>
<script type="text/javascript">
// 1. 定义 (路由) 组件
// 可以从其他文件 import 进来
// 也可以为html标签
var mya = {
//调用外部js
template: '<div>a组件</div>'
}
var myb = {
template: '<div>b组件</div>'
}
var myHome = {
template: '<div>我是首页</div>'
}
// 2. 创建 router 实例，然后 routes 中定义路由
var router = new VueRouter({
// routes
// 每个路由绑定一个组件
// path路由地址
// component调用组件
routes: [{
path: '/',
component: myHome
}, {
path: '/a',
component: mya
}, {
path: '/b',
component: myb
}]
})
var k = new Vue({
el: "#app",
data: {},
methods: {
t(){
this.$router.push('/');
},
a(){
this.$router.push('/a');
},
b(){
this.$router.push('/b');
}
},
router
})
</script>
</body>
</html>默认跳转控件
没有外部JS案例
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<router-link to="/a1">A</router-link>
<router-link to="/a2">B</router-link>
<el-card>路由展现区
<router-view />
</el-card>
</div>
<script type="text/javascript">
// 1. 定义 (路由) 组件
// 可以从其他文件 import 进来
var mya = {
template: '<img width="200px" src="https://bt.lldwb.top/down/nr4quYrnYkrn"/>'
}
var myb = {
template: '<img width="200px" src="https://bt.lldwb.top/down/o4hhf6RNf8X9"/>'
}
// 2. 创建 router 实例，然后 routes 中定义路由
// routes
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
var router = new VueRouter({
routes: [{
path: '/a1',
component: mya
},
{
path: '/a2',
component: myb
}
]
})
var k = new Vue({
el: "#app",
data: {},
methods: {},
router
})
</script>
</body>
</html>有外部JS案例
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
<!-- 引入外部js文件 -->
<script src="js/a1.js"></script>
<script src="js/a2.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- to默认为/ -->
<router-link to="/a1">A</router-link>
<router-link to="/a2">B</router-link>
<el-card>路由展现区
<router-view />
</el-card>
</div>
<script type="text/javascript">
// 1. 定义 (路由) 组件
// 可以从其他文件 import 进来
// 也可以为html标签
var mya = {
//调用外部js
template: '<myas></myas>'
}
var myb = {
template: '<mybs></mybs>'
}
var myHome = {
template: '<div>首页</div>'
}
// 2. 创建 router 实例，然后 routes 中定义路由
var router = new VueRouter({
// routes
// 每个路由绑定一个组件
// path路由地址
// component调用组件
routes: [{
path: '/',
component: myHome
}, {
path: '/a1',
component: mya
}, {
path: '/a2',
component: myb
}]
})
var k = new Vue({
el: "#app",
data: {},
methods: {},
// components: {
// mya,
// myb,
// myHome
// },
router
})
</script>
</body>
</html>a1.js
Vue.component('myas', {
data() {
return {
widths: '200px',
url: 'https://bt.lldwb.top/down/nr4quYrnYkrn'
}
},
template: '<img :width="widths" :src="url"/>'
})a2.js
Vue.component('mybs', {
data() {
return {
widths: '200px',
url: 'https://bt.lldwb.top/down/o4hhf6RNf8X9'
}
},
template: '<img :width="widths" :src="url"/>'
})在F12控制台中通过this.router.push('/a1');修改路由
在JS事件中通过this.$router.push('/a1');修改路由