vue路由简单实用
2024-09-07 05:06:48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<div>
<!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 -->
<router-link to="/home">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</div> <!-- 5、在页面上使用<router-view></router-view>标签,用于渲染匹配的组件 -->
<router-view></router-view>
</div> <!-- 0、引入依赖库(类库需要下载) -->
<script src="vue.min.js"></script>
<script src="vue-router.js"></script> <script type="text/javascript">
/* 1、创建组件 */
const Home = Vue.extend({
template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
});
const About = Vue.extend({
template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
}); // 2. 创建 router 实例,然后传 `routes`路由映射 配置
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{ path: '/', component: Home } //设置默认路径
]}
); // 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由,从而让整个应用都有路由功能
const vm = new Vue({
router: router
}).$mount('#app'); // 现在,应用已经启动了!
</script>
</body>
</html>
最新文章
- MySQL之权限管理
- NavigationBar隐藏后,返回时表现不完美
- SQL 参数,传入参数和自己申明参数——异常抛出
- JSP-12-使用过滤器和监听器
- SQL Server 2008中查看锁信息
- hdu 3544 Alice&#39;s Game 博弈论
- 《数字图像处理原理与实践(MATLAB版)》一书之代码Part6
- cloud-init 工作原理 - 每天5分钟玩转 OpenStack(171)
- mysql update where
- 谁记录了mysql error log中的超长信息
- RabbitMQ的消息确认机制
- 微服务-封装-docker by daysn大雄
- Tex_安装_在Ubuntu系统下
- vmware 12中安装苹果系统
- activemq消息队列的使用及应用docker部署常见问题及注意事项
- 基于xtrabackup GDIT方式不锁库作主从同步(主主同步同理,反向及可)
- 在 Visual Studio 2017 中找回消失的&ldquo;在浏览器中查看&rdquo;命令
- Spring的JdbcTemplate与其事务
- WSAAsyncSelect 模型
- 【BZOJ2716】天使玩偶【kd树】