Vue框架——基本知识点+示例（4）
01 路由定义
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
/**/
.router-link-active{
color: #ff6600;
}
style>
<body>
<div id="app">
<ul>
<li>
<router-link to="/like">
猜你喜欢
router-link>
li>
<li><router-link to="/type">分类router-link>li>
ul>
<router-view>router-view>
div>
<template id="like">
<h1>这是猜你喜欢的内容h1>
template>
<template id="type">
<h1>这是分类内容h1>
template>
<script src="js/vue.js">script>
<script src="js/vue-router.min.js">script>
<script>
var like={
template:'#like',
}
var type={
template:'#type'
}
// 定义路由
var router = new VueRouter({
// 配置路线 为每一个路由配置路线 渲染的内容放置在router-view内部
routes:[
{
path:'/like',
component:like
},
{
path:'/type',
component: type
},
// 重定向，*所有的，以上都不符合的时候，加载like路由
{
path: '/*',
// ①直接路由跳转,如果有定义router-link-active类的话，可以直接使用（直接就有这个类了）
// redirect:'/like'
// ②只是单纯渲染组件，如果有定义router-link-active类的话，不会直接显示出来，要先点击一下，跳转到相应路由才行（点击后才有此类）
component: like
}
]
})
new Vue({
el:'#app',
router:router
})
script>
body>
html>
02 路由嵌套
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<router-view>router-view>
<ul>
<li><router-link to="/like">猜你喜欢router-link>li>
<li><router-link to="/type">分类router-link>li>
ul>
div>
<template id="like">
<h1>这是猜你喜欢的内容h1>
template>
<template id="type">
<div>
<h1>这是分类的内容h1>
<router-link to="/wash">洗衣机router-link>
<router-link to="/mobile">手机router-link>
<router-view>router-view>
div>
template>
<template id="wash">
<h1>这是洗衣机内容h1>
template>
<template id="mobile">
<h1>这是手机内容h1>
template>
<script src="js/vue.js">script>
<script src="js/vue-router.min.js">script>
<script>
var type={
template:'#type'
}
var like={
template:'#like'
}
var wash={
template:'#wash'
}
var mobile={
template:'#mobile'
}
var router = new VueRouter({
routes:[
{
path:'/like',
component:like
},
{
path:'/type',
component: type,
// 配置子路由，type组件内部一定要有router-view。如果没有的话，则不渲染，也不报错
children:[
{
path:'/wash',
component:wash
},
{
path: '/mobile',
component: mobile
}
]
},
{
path: '/*',
redirect:'/like'
}
]
})
new Vue({
el:'#app',
// 对象的属性和值一样，可以简写
router,
})
script>
body>
html>
03 路由嵌套2
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<router-view>router-view>
<ul>
<li><router-link to="/like">猜你喜欢router-link>li>
<li><router-link to="/type">分类router-link>li>
ul>
div>
<template id="like">
<h1>这是猜你喜欢的内容h1>
template>
<template id="type">
<div>
<h1>这是分类的内容h1>
<router-link to="/wash">洗衣机router-link>
<router-link to="/mobile">手机router-link>
div>
template>
<template id="wash">
<h1>这是洗衣机h1>
template>
<template id="mobile">
<h1>这是手机h1>
template>
<script src="js/vue.js">script>
<script src="js/vue-router.min.js">script>
<script>
var type={
template:'#type'
}
var like={
template:'#like'
}
var wash={
template:'#wash'
}
var mobile={
template:'#mobile'
}
var router = new VueRouter({
routes:[
{
path:'/like',
component:like
},
{
path:'/type',
component: type,
// 配置子路由,type组件内部一定要有router-view
// children:[
// {
// path:'/wash',
// component:wash
// },
// {
// path:'/mobile',
// component: mobile
// }
// ]
},
//虽然wash和mobile是子路由，但是配置在第一层路由下面，则内容渲染到第一层的router-view内部
{
path:'/wash',
component:wash
},
{
path: '/mobile',
component: mobile
},
{
path: '/*',
redirect:'/like'
}
]
})
new Vue({
el:'#app',
// 对象的属性和值一样，可以简写
router,
})
script>
body>
html>
04 路由传参
路径传参 通过路径传递参数
第一步: :to="‘路径’+传递参数"(router-link中添加)
第二步: 在routes里面 to=’/路径/:参数/:参数’
第三步: 接收参数 this.$route.params
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h1>这是列表页h1>
<ul>
<li v-for="(item,index) in list">
<router-link :to="'/datails/'+item.id+'/'+item.name">
{{item.name}}
router-link>
li>
ul>
<router-view>router-view>
div>
<template id="details">
<h2>这是{{pro}}商品详情h2>
template>
<script src="js/vue.js">script>
<script src="js/vue-router.min.js">script>
<script>
var details={
template:'#details',
data(){
return{
pro:''
}
},
mounted(){
console.log(111);
//接收参数
console.log(this.$route.params);
},
// 监听,当路由发生变化的时候执行
watch:{
$route(to,from){
// ajax请求
// $.ajax({
// data:{
// id:this.$router.params.a
// }
// })
console.log(to.path);
this.pro=this.$route.params.b
}
},
}
var router = new VueRouter({
routes:[
{
// '/路径/:参数/:参数'
// path:'/details/:id/:name',
path:'/details/:a/:b',
component:details
}
]
})
new Vue({
el:'#app',
data:{
list:[
{
name:'手机',
id:1
},
{
name:'洗衣机',
id:2
}
]
},
router
})
script>
body>
html>
05 路由应用
路由传参
第一步:to={name:对应的是配置路线里面的name值,params:{传递数据}}
第二步:配置路线里面增加name值
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<router-view>router-view>
div>
<template id="index">
<section>
<router-view>router-view>
<ul>
<li><router-link to="/like">猜你喜欢router-link>li>
<li><router-link to="/type">分类router-link>li>
<li><router-link to="/menu">必抢清单router-link>li>
<li><router-link to="/my">我的router-link>li>
ul>
section>
template>
<template id="like">
<h1>这是猜你喜欢的内容h1>
template>
<template id="type">
<div>
<h1>这是分类内容h1>
<router-link v-for="(item,index) in list" :to="{name:'d',params:{id:item.id,name:item.name}}">
{{item.name}}
router-link>
<router-view>router-view>
div>
template>
<template id="my">
<h1>这是我的h1>
template>
<template id="menu">
<h1>这是menuh1>
template>
<template id="details">
<h1>这是{{type}}详情页h1>
template>
<script src="js/vue.js">script>
<script src="js/vue-router.min.js">script>
<script>
var index={
template:'#index'
}
var like={
template:'#like'
}
var type={
template:'#type',
data(){
return{
list:[
// {id: 1, name: "手机"}
{
name:'手机',
id:1
},
{
name:'洗衣机',
id:2
}
]
}
}
}
var my={
template:'#my'
}
var details={
template:'#details',
data(){
return{
type:''
}
},
mounted(){
console.log(this.$route.params);
// 打印结果:{id: 1, name: "手机"}
this.type=this.$route.params.name;
},
watch:{
$route(to,from){
console.log(111);
}
}
}
var menu={
template:'#menu'
}
var router = new VueRouter({
routes:[
{
// path:'/',
path:'/like',
component:index,
children:[
{
path: '/like',
component: like
},
{
path: '/type',
component: type,
//渲染到第二层router-view,写在同一个页面中
// children:[
// {
// path:'/details',
// name:'d',
// component:details
// }
// ]
},
{
path: '/menu',
component: menu
}
],
redirect:'/like'
},
//写在第一层的router-view中,跳转到一个新的页面
{
path: '/details',
name:'d',
component: details
},
{
path: '/my',
component: my
},
{
path: '/*',
redirect: '/like'
}
]
})
new Vue({
el:'#app',
router
})
script>
body>
html>
06 push和replace、go
1.返回,数值可以自定义:
-1返回上一个页面 -2返回上两个页面
this.$router.go(-2);2.push在历史记录新增一条
this.$router.push(’/like’);3.替换当前路径(去到替换的路径页面)
this.$router.replace(’/my’);
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<router-view>router-view>
div>
<template id="index">
<section>
<router-view>router-view>
<ul>
<li><router-link to="/like">猜你喜欢router-link>li>
<li><router-link to="/type">分类router-link>li>
<li><router-link to="menu">必抢清单router-link>li>
<li><router-link to="my">我的router-link>li>
ul>
section>
template>
<template id="like">
<h1>这是[猜你喜欢]的内容h1>
template>
<template id="type">
<div>
<h1>这是[分类]的内容h1>
<router-link v-for="(item,index) in list" :to="{name:'d',params:{name:item.name,id:item.id}}">
{{item.name}}
router-link>
<router-view>router-view>
div>
template>
<template id="menu">
<h1>这是[menu]内容h1>
template>
<template id="my">
<h1>这是[我的]内容h1>
template>
<template id="details">
<h1><button @click="go()">返回button>这是{{type}}详情页h1>
template>
<script src="js/vue.js">script>
<script src="js/vue-router.min.js">script>
<script>
var index={
template:'#index'
}
var like = {
template:'#like'
}
var type = {
template:'#type',
//添加数据到type中
data(){
return{
list:[
{
name:'手机',
id:1
},
{
name:'洗衣机',
id:2
}
]
}
}
}
var menu = {
template:'#menu'
}
var my = {
template:'#my'
}
var details = {
template:'#details',
// 添加数据到details中
data(){
return{
type:''
}
},
mounted(){
console.log(this.$route.params);
this.type=this.$route.params.name;
},
watch:{
$route(to,from){
console.log(to);
console.log(from);
console.log(111);
}
},
methods:{
go(){
// 返回,数值可以自定义:-1返回上一个页面 -2返回上两个页面
// this.$router.go(-2);
// push在历史记录新增一条
this.$router.push('/like');
// console.log(this.$router);
// 替换当前路径(去到替换的路径页面)
// this.$router.replace('/my');
}
}
}
//定义路由
var router = new VueRouter({
//配置路线
routes:[
{
path:'/like',
component:index,
children:[
{
path:'/like',
component:like
},
{
path: '/type',
component: type
},
{
path:'/menu',
component: menu
}
],
redirect:'/like'
},
//与index同级,渲染到第一层的router-view中
{
path: '/details',
//第二步:配置路线里增加的name值
name:'d',
component: details
},
{
path: '/my',
component: my
},
{
path:'/*',
redirect: '/like'
}
]
})
new Vue({
el:'#app',
//相当于router:router,因为同名所以可以缩写
router
})
script>
body>
html>
07 另一种跳转实现方式
a.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
订单结算
body>
html>
b.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
表单页面
body>
html>
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<a href="a.html" target="box">结算页面a>
<a href="b.html" target="box">表单页面a>
<iframe src="a.html" frameborder="0" name="box">iframe>
body>
html>
