路由
- 前端路由：根据不同的path，显示不同的组件
-
- 渐进性框架：
- (1). 路由功能 是以 vue 插件的形式 灌入Vue函数上 （vue.js核心包，没有路由）
- (2). 路由功能 单独 拿出来 vueRouter(插件的形式灌入Vue构造函数)
- (3). 路由 用于构建 spa （单页面应用） 应用
分析单页面应用的优劣势
- 优势: 单页面应用，在我们“页面”（地址改变），不会重新加载 另一个html，只是切换路由显示。隐藏，页面切换速度以及 不同页面加载很快
- 劣势: 对于seo不友好,无法抓取页面结构（解决方式利用vue，ssr服务端渲染）
<!-- 在 Vue 后面加载 vue-router，它会自动安装的： -->
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- 通过设置tag属性来改变router-link的默认样式 -->
<router-link to="/home" tag="button">Go To Home</router-link>
<router-link to="/news">Go To News</router-link>
<!-- 想要显示对应的路由，还需要路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<template id="home">
<h2>Home页组件</h2>
</template>
<template id="news">
<h2>News页组件</h2>
</template>
</body>
<script>
//定义组件,路由切换时显示对应的组件
let Home = {
template:'#home'
}
let News = {
template:'#news'
}
//定义路由，每个路由都应该映射一个组件。有path属性，component是对应的组件
const routes = [
{
path:'/home',
component:Home
},
{
path:'/news',
component:News
}
]
//创建路由实例，然后传routes配置规则
const router = new VueRouter({
routes //缩写，相当于routes：routes,在这里使用定义好的路由规则
})
// 通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，
// 也可以通过 this.$route 访问当前路由：
let vm = new Vue({
el:'#app',
router //这里将路由挂载到实例上
})
</script>
动态路由
<style>
.router-link-active {
background: cadetblue;
}
</style>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 出口 -->
<router-view></router-view>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- 通过设置tag属性来改变router-link的默认样式 -->
<router-link to="/home" tag="button">Go To Home</router-link>
<router-link to="/news">Go To News</router-link>
</div>
<template id="home">
<h2>Home页组件</h2>
</template>
<template id="news">
<h2>News页组件
<router-link to="/news/1">
我是新闻1
</router-link>
<router-link to="/news/2">
我是新闻2
</router-link>
<router-link to="/news/3">
我是新闻3
</router-link>
</h2>
</template>
</body>
<script>
//定义组件,路由切换时显示对应的组件
let Home = {
template:'#home'
}
let News = {
template:'#news'
}
//匹配404页面
let NotFound = {
template:`
<h1>404</h1>
`
}
//定义一个新闻详情子组件
let NewsSon = {
template:`
<div>
<h2>新闻详情</h2>
</div>
`,
mounted(){
//在这里获取到动态路由传的参数，及:id
console.log(this.$route.params.id);
}
}
//定义路由
const routes = [
{
path:'/news',
component:News
},
{
//重定向
path:'/',
redirect:'/news'
},
{
// 动态路径参数 以冒号开头
path:'/news/:id',
component: NewsSon
},
{
//匹配404页面，该路由最好放在最末尾
path:'*',
component:NotFound
}
]
//路由实例化
const router = new VueRouter({
routes //定义路由规则
})
let vm = new Vue({
el:"#app",
router //挂载路由
})
/*
hash路由
根据 地址 的hash值得变化 来 切换不同组件
window.addEvenetListener("hashchange",()=>{
// 监听地址栏 hash值变化
})
*/
</script>
监听动态路由参数变化以及匹配404页面和重定向
//定义一个新闻详情子组件
let NewsSon = {
template:`
<div>
<h2>新闻详情</h2>
</div>
`,
mounted(){
//在这里获取到动态路由传的参数，及:id
console.log(this.$route.params.id);
},
watch:{
//复用组件时，想对路由参数的变化作出响应的话，watch (监测变化) $route 对象：
$route(to,from){
console.log(to); //目标路由
console.log(from); //上一个路由
}
}
}
let News = {
template: `
<div>
<h1>
新闻页
</h1>
</div>
`
}
//匹配404页面
let NotFound = {
template:`
<h1>404</h1>
`
}
// 定义路由
const routes = [
{
path:'/',
//重定向到news页
redirect:'/news'
},
{
path:'/news',
//命名路由即给路由定义个name
name:'新闻',
component:News
},
{
path:'/news/:id',
component:NewsSon
},
{
path:'*',
component:NotFound
}
]
路由嵌套
- 重点：
- 1，二级路由的path 最好 包含一级路由path
- 2，一定在要 二级路由对于的一级路由 模板 中 写出口 router-view
- 案例分析：
<style>
.router-link-active {
background: cadetblue;
}
.router-link-exact-active {
background: tan;
}
</style>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link tag="button" to="/home">home页</router-link>
<router-link tag="button" to="/news">新闻页</router-link>
<!-- 出口 -->
<router-view></router-view>
</div>
<template id="news">
<div>
<router-link to="/news/native">国内新闻</router-link>
<router-link to="/news/abroad">国外新闻</router-link>
<h1>
我是news页
<!-- 这里也需要路由的出口标签 -->
<router-view></router-view>
</h1>
</div>
</template>
</body>
<script>
//定义组件
let Home = {
template: `
<div>
<h1>
我是home页
</h1>
</div>
`
}
let News = {
template: '#news'
}
//定义两个新闻子组件
const NativeNews = {
template:`
<div>
<h2>国内新闻展示</h2>
</div>
`
}
const AbroadNews = {
template:`
<div>
<h2>国外新闻展示</h2>
</div>
`
}
//定义路由
const routes = [
{
path:'/',
//重定向到home页
redirect:'/home'
},
{
path:'/home',
component:Home
},
{
path:'/news',
component:News,
//新闻页里面有子路由
children:[
{
path:'/news/native',
component:NativeNews
},
{
path:'/news/abroad',
component:AbroadNews
}
]
},
]
//路由实例化
const router = new VueRouter({
routes
})
let vm = new Vue({
el: '#app',
router
})
</script>
