Vue:路由及默认的跳转
程序员文章站
2024-02-13 17:00:58
...
第一步:在新建的components目录下创建如下所示的两个组件:
Home.vue
<template>
<div>
<h2> {{msg}}</h2>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Home首页'
}
}
}
</script>
News.vue
<template>
<div>
<h2>{{msg}}</h2>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'News头部',
}
}
}
</script>
第二步:修改main.js的代码如下所示:
import Vue from 'vue';
import App from './App.vue';
// 引入并使用vue-router
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// 引入组件
import Home from './components/Home';
import News from './components/News';
//定义路径
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]
//实例化VueRouter
const router = new VueRouter({
routes
})
//挂载
new Vue({
el: '#app',
router,
render: h => h(App)
})
第三步:App.vue
<template>
<div id="app">
<router-link to="/home">Home</router-link>
<router-link to="/news">News</router-link>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
页面效果
默认页面
Home页面
News页面
上一篇: react中的路由----基本使用
下一篇: mysql创建只有查询权限用户