- 一、单页面应用spa
就是只有一张web页面的应用,就是加载单个html。
- 优点:页面切换快
- 缺点:首屏时间稍慢,SEO(搜索引擎优化)差 “搜索引擎还读不懂单页面,搜索引擎擅长读的是多页面”
- 二、路由 vue-router
- 基本使用:
<router-link to="/home">主页</router-link> <router-view></router-view>
点击“主页”,跳转到/home页 - 路由具体的写法:(官方)
HTML文件
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
JavaScript文件
// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在,应用已经启动了!
练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!-- 点击手机,就会显示手机的组件在<router-view>里 -->
<div id="app">
<router-link to="/mobile">手机</router-link>
<router-link to="/auto">汽车</router-link>
<router-link to="/mobile">手机</router-link>
<router-view></router-view>
</div>
<!-- !!!!!!!!!注意啦!一定要先引入vue.js再引入vue router -->
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
// 组件1 mobile手机的组件,用m代替
var m = {
// 这里必须用反引号!!!!!!!!引起注意!!!!!!!!!反引号!!!!!!!
template: `<div class="box">这是手机的页面!</div>`
};
// 组件2 auto汽车的组件,用a代替
var a = {
// 这里必须用反引号!!!!!!!!引起注意!!!!!!!!!反引号!!!!!!!
template: `<div class="box">这是汽车的页面!</div>`
};
// 这里面要写的是路的集合,routes,就是哪个路对应哪个组件
var router = new VueRouter({
routes: [
// "/mobile"这个路径对应的component是m
{ path: "/mobile", component: m },
{ path: "/auto", component: a }
]
});
var vm = new Vue({
el: "#app",
// 在这里告知router路由器是上面var出来的router变量
// 当属性和属性变量是同一个名字的时候,只需要写一个即可,就像下面两行的代码,都是好用的
// router,
router: router
});
</script>
</body>
</html>
- 三、路由嵌套
- 练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>子路由</title>
</head>
<body>
<!-- 现在做的是spa,所有的跳转都是在一个界面里进行的!!!!!!!!! -->
<!-- 点击手机,就会显示手机的组件在<router-view>里 -->
<div id="app">
<router-link to="/mobile">手机</router-link>
<router-link to="/auto">汽车</router-link>
<router-link to="/mobile">手机</router-link>
<router-view></router-view>
</div>
<!-- !!!!!!!!!注意啦!一定要先引入vue.js再引入vue router -->
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
// 组件1 mobile手机的组件,用m代替
var m = {
// 这里必须用反引号!!!!!!!!引起注意!!!!!!!!!反引号!!!!!!!
template: `<div class="box">这是手机的页面!
<router-link to="/mobile/huawei">华为</router-link>
<router-link to="/mobile/xiaomi">小米</router-link>
<router-view></router-view>
</div>`
// 子组件里也要有!router-view!!!!!
};
// 组件2 auto汽车的组件,用a代替
var a = {
// 这里必须用反引号!!!!!!!!引起注意!!!!!!!!!反引号!!!!!!!
template: `<div class="box">这是汽车的页面!</div>`
};
// 组件3 手机的子组件华为,用a代替
var huawei = {
// 这里必须用反引号!!!!!!!!引起注意!!!!!!!!!反引号!!!!!!!
template: `<div class="box">这是华为的页面!</div>`
};
// 组件4 手机的子组件小米,用a代替
var xiaomi = {
// 这里必须用反引号!!!!!!!!引起注意!!!!!!!!!反引号!!!!!!!
template: `<div class="box">这是小米的页面</div>`
};
// 这里面要写的是路的集合,routes,就是哪个路对应哪个组件
var router = new VueRouter({
routes: [
// "/mobile"这个路径对应的component是m
{
path: "/mobile",
component: m,
// 子路由
children: [{
path: "/huawei",
comment: huawei
},
{
path: "/xiaomi",
comment: xiaomi
}
]
},
{
path: "/auto",
component: a
}
]
});
var vm = new Vue({
el: "#app",
// 在这里告知router路由器是上面var出来的router变量
// 当属性和属性变量是同一个名字的时候,只需要写一个即可,就像下面两行的代码,都是好用的
// router,
router: router
});
</script>
</body>
</html>
3. 路由参数定义实现url的传值:
$route.params.cname 需要在路由里定义
$route.query.type 无需定义,使用时在url中用
练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>两种传值方法 第一种用?,第二种直接用$route.params.name...</title>
</head>
<body>
<!-- 现在做的是spa,所有的跳转都是在一个界面里进行的!!!!!!!!! -->
<!-- 点击手机,就会显示手机的组件在<router-view>里 -->
<div id="app">
<router-link to="/mobile">手机</router-link>
<router-link to="/auto">汽车</router-link>
<router-link to="/auto/哈佛">国产畅销汽车</router-link>
<!-- 上面的这一行代码用$router.params.name这种方式传值,我们需要在上面的/auto 后面加上上面的参数哦,这种方式只能传比较简单的参数哦 -->
<router-link to="{name:'qiche',params:{ name='五菱之光' }}">国产神车</router-link>
<!-- 第三种传参的方法中,params可以传复杂的值 -->
<router-view></router-view>
</div>
<!-- !!!!!!!!!注意啦!一定要先引入vue.js再引入vue router -->
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
// 组件1 mobile手机的组件,用m代替
var m = {
// 这里必须用反引号!!!!!!!!引起注意!!!!!!!!!反引号!!!!!!!
template: `<div class="box">这是手机的页面!
<router-link to="/mobile/huawei">华为</router-link>
<router-link to="/mobile/xiaomi">小米</router-link>
<router-link to="/mobile/huawei?name=p30">销量冠军</router-link>
<router-link to="/mobile/huawei?name=mate20">人气冠军</router-link>
<router-view></router-view>
</div>`
// 子组件里也要有!router-view!!!!!
};
// 组件2 auto汽车的组件,用a代替
var a = {
// 这里必须用反引号!!!!!!!!引起注意!!!!!!!!!反引号!!!!!!!
// 注意看这里用到的是第二种需要定义的$router.params.name这种方式,那么值如何传进来呢?
template: `<div class="box">
<h3>这是汽车的页面!</h3>
{{$router.params.name}}
</div>`
};
// 组件3 手机的子组件华为,用a代替
var huawei = {
// 这里必须用反引号!!!!!!!!引起注意!!!!!!!!!反引号!!!!!!!
// 在这里可以获得上面router-link中的参数
template: `<div class="sm">
<h3>这是华为的页面!</h3>
{{$router.query.name}}
</div>`
};
// 组件4 手机的子组件小米,用a代替
var xiaomi = {
// 这里必须用反引号!!!!!!!!引起注意!!!!!!!!!反引号!!!!!!!
template: `<div class="sm">这是小米的页面</div>`
};
// 这里面要写的是路的集合,routes,就是哪个路对应哪个组件
var router = new VueRouter({
routes: [
// "/mobile"这个路径对应的component是m
{
path: "/mobile",
component: m,
// 子路由
children: [{
path: "/huawei",
comment: huawei
},
{
// 第三种传值方法哦
path: "/xiaomi",
comment: xiaomi,
name: "qiche"
}
]
},
{
// 第二种传参的方式,这里面就必须要在path中定义一个参数了!
path: "/auto/:name",
component: a
}
]
});
var vm = new Vue({
el: "#app",
// 在这里告知router路由器是上面var出来的router变量
// 当属性和属性变量是同一个名字的时候,只需要写一个即可,就像下面两行的代码,都是好用的
// router,
router: router
});
</script>
</body>
</html>