Vue-路由
## 路由
-映射关系 url地址：服务器真实资源
-前端 hash 页面跳转
事件：事件处理函数
应用：通过超链接实现，如点击超链接hash会改变，此时我们监听hash，一旦有变化就需要获取响应的hash值，从而切换要显示的组件
注意导入相应的包：通过使用VUE-router包简化vue中通过location的hash值变化实现路由功能
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
【1】最基本应用
<div id="app">
<router-link to='/home'>首页</router-link>
<router-link to='/news'>新闻</router-link>
<!-- 占位符：显示组件 -->
<router-view></router-view>
</div>
============================
创建组件
const Home = {
template: `
<h1>主页板块</h1>
`
};
const News = {
template: `
<h1>新闻板块</h1>
`
};
===========================
//创建路由实例对象
const router = new VueRouter({
//路由规则
routes: [{
path: '/',
redirect: '/home'
}, {
path: '/home',
component: Home
}, {
path: '/news',
component: News
}]
});
==============================
//挂载路由
const vm = new Vue({
el: '#app',
router
});
【2】嵌套路由
=============定义组件
const Home = {
template: `
<h1>主页板块</h1>
`
};
const News = {
// 注意：根 div的作用
template: `
<div>
<h1>新闻板块</h1>
<router-link to='/news/foreign'>国外</router-link>
<router-link to='/news/china'>国内</router-link>
<router-view></router-view>
</div>
`
};
//
const ForeignNews = {
template: `
<h1>国外新闻板块</h1>
`
};
const ChineseNews = {
template: `
<h1>国内新闻板块</h1>
`
};
====================路由实例对象
const router = new VueRouter({
//路由规则
routes: [{
path: '/',
redirect: '/abc'
}, {
path: '/home',
component: Home
}, {
path: '/news',
component: News,
children: [{
path: '/news/foreign',
component: ForeignNews
}, {
path: '/news/china',
component: ChineseNews
}]
}]
});
===============挂载路由
const vm = new Vue({
el: '#app',
router
});
=============页面布局不变
<div id="app">
<!-- <vue-linker></vue-linker> -->
<router-link to='/home'>首页</router-link>
<router-link to='/news'>新闻</router-link>
<!-- 占位符：显示组件 -->
<router-view></router-view>
</div>
【3】多个子组件
<div id="app">
<!-- <vue-linker></vue-linker> -->
<router-link to='/news/1'>新闻1</router-link>
<router-link to='/news/2'>新闻2</router-link>
<router-link to='/news/3'>新闻3</router-link>
<!-- 占位符：显示组件 -->
<router-view></router-view>
</div>
==============路由实例对象==================
const News = {
// <h1>公司新闻{{id}}</h1>
// <h1>公司新闻{{$route.params.id}}</h1>
props: ['id', 'a', 'b'],
template: `
<h1>公司新闻{{id}}-{{$route.params.id}}-{{a}}-{{b}}</h1>
`
};
=============注意子路由要对a,b可见，id：props=ture
//创建路由实例对象
const router = new VueRouter({
//路由规则
routes: [{
path: '/',
redirect: '/news/1'
}, {
path: '/news/:id',
component: News,
props: true,
// props: {
// a: 10,
// b: 20
// }
props: (route) => {
return {
a: 10,
b: 20,
id: route.params.id
}
}
}],
});
【4】命名路由
<div id="app">
<router-link to='/home'>首页</router-link>
<router-link :to="{name:'news',params:{id:30}}">新闻</router-link>
<!-- 声明式导航 -->
<router-link to='/news/1'>新闻1</router-link>
<router-link to='/news/2'>新闻2</router-link>
<router-link to='/news/3'>新闻3</router-link>
<router-view></router-view>
</div>
============================定义组件——home
const Home = {
template: `
<div>
<h1>Home</h1>
<button @click='goNews'>跳转到新闻页面</button>
</div>
`,
methods: {
goNews() {
// 支持页面跳转
this.$router.push('/news/1');
this.$router.push({
name: 'news',
params: {
id: 123
}
});
}
}
}
======================news组件
const News = {
props: ['id', 'a', 'b'],
template: `
<div>
<h1>公司新闻{{id}}-{{$route.params.id}}-{{a}}-{{b}}</h1>
<button @click='goHome'>返回上一页</button>
</div>
`,
methods: {
goHome() {
this.$router.go(-1);
}
}
};
================路由实例定义
const router = new VueRouter({
routes: [{
path: '/',
redirect: '/home'
}, {
path: '/home',
component: Home
}, {
name: 'news', //通过name属性给该路由添加别名
path: '/news/:id',
component: News,
props: (route) => {
return {
a: 10,
b: 20,
id: route.params.id
}
}
}],
});
window.onhashchange = () => {
console.log(location);
console.log(location.hash.slice(1));
vm.compName = location.hash.slice(1);
}
===========数据定义============
let vm = new Vue({
el: '#app',
data: {
compName: 'home'
},
components: {
home,
news,
products,
about
}
});
=======组件定义=============
//首页
const home = {
template: `
<h1>主页板块</h1>
`
};
//新闻
const news = {
template: `
<h1>新闻板块</h1>
`
};
//产品
const products = {
template: `
<h1>产品板块</h1>
`
};
//关于我们
const about = {
template: `
<h1>关于我们板块</h1>
`
};
=====页面布局============
<div id="app">
<a href="#home">首页</a>
<a href="#news">新闻</a>
<a href="#products">产品</a>
<a href="#about">关于我们</a>
<div>
<component :is="compName"></component>
<!-- <components>{{compName}}</components>
<abcd>{{compName}}</abcd> -->
</div>
