Vue_(Router路由)-vue-router路由的基本用法
2024-09-05 07:43:00
vue-router官网:传送门
vue-router起步:传送门
vue-router路由:Vue.js官网推出的路由管理器,方便的构建单页应用
单页应用:Single Page Application简称SPA,只有一个web页面的应用,用户与应用交互时,动态更新该页面的内容
简单的来说,根据不同的url与数据,将他们都显示在同一个页面中,就可以称为是单页应用
而控制页面跳转需要用路由
vue-router下载:下载js,或使用npm install vue-router -S
vue-router使用:
定义组件
配置路由
创建路由对象
注入路由
Learn
一、-vue-router路由的基本用法
目录结构
【每个demo下方都存有html源码】
一、-vue-router路由的基本用法
使用 router-link 组件来导航、通过传入 `to` 属性指定链接、<router-link> 默认会被渲染成一个 `<a>` 标签
<body>
<div id = "GaryId">
<!--router-link默认被渲染成一个a标签-->
<router-link to="/home">首页</router-link>
<router-link to="/foods">美食</router-link> <div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div>
</body>
分四步使用vue-router
<script> //1 定义组件
let Home = {
template : "<h2>首页</h2>"
}
let Foods = {
template : "<h2>美食</h2>"
} //2 配置路由 路由可能有多个
const myRoutes = [
{
path : "/home",
component : Home
},
{
path : "/foods",
component : Foods
}
] // 3 创建路由对象
const myRouter = new VueRouter({
//routes : routes
routes : myRoutes
}); new Vue({
//4 注入路由 简写
router : myRouter
}).$mount("#GaryId")
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id = "GaryId">
<!--router-link默认被渲染成一个a标签-->
<router-link to="/home">首页</router-link>
<router-link to="/foods">美食</router-link> <div>
<!--将数据显示在这里-->
<router-view></router-view>
</div>
</div>
</body> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript" src="../js/vue-router.js" ></script>
<script> //1 定义组件
let Home = {
template : "<h2>首页</h2>"
}
let Foods = {
template : "<h2>美食</h2>"
} //2 配置路由 路由可能有多个
const myRoutes = [
{
path : "/home",
component : Home
},
{
path : "/foods",
component : Foods
}
] // 3 创建路由对象
const myRouter = new VueRouter({
//routes : routes
routes : myRoutes
}); new Vue({
//4 注入路由 简写
router : myRouter
}).$mount("#GaryId")
</script> </html>
Gary_vue-router.html
最新文章
- php中cookie技术关于跨目录调用cookie值的问题
- cocos2d之json使用实例
- tomcat异常: Cannot get a connection, pool exhausted
- 启用 CORS 来解决这个问题(ajax跨域请求)
- HDU 1018 Big Number (阶乘位数)
- codeforces 691E Xor-sequences 矩阵快速幂
- MYSQL一对多,两表查询合并数据
- hdu 2156
- A - 高精度(大数)N次方(第二季水)
- 一百万数据索引实例測试--mysql
- mui中文在线手册及教程文档
- node.js平台下的mysql数据库配置及连接
- Hibernate入门(二)
- WEB-INF目录下文件复制的几种方式
- django-rest-framework 注意事项
- C# RichTextBox 滚动条 滚动到最新行
- BZOJ.2655.calc(DP/容斥 拉格朗日插值)
- Django连接Oracle数据库配置
- go语言之进阶篇Read的使用
- sqlalchemy 获取计数 count