路由vue-router
1）是vue的一个核心插件
2）可以根据不同的url访问不同的页面（进行不同页面的跳转）
3）创建单页面应用[又叫做SPA（SINGLE PAGE APP LICATION）应用]
简单路由
<div class="box">
<router-link to="/home">首页</router-link>
<router-link to="/bag">用户页</router-link>
<router-view></router-view>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<script>
var Home={
template:`
<h1>欢迎来到我的网站</h1>
`
}
var Bag={
template:`
<h1>进入用户页面</h1>
`
}
const routes=[
{path:"/",compontent:Home},
{path:"/home",component:Home},
{path:"/bag",component:Bag}
]
const router=new VueRouter({
routes:routes
})
new Vue({
el:".box",
router:router
})
</script>
当点击是字体点颜色
``css
<style>
/*.active{
color:orange;
}*/
.router-link-active{
color: orange;
}
</style>
``html
<div class="box">
<router-link to="/home">首页</router-link>
<router-link to="/bag">用户页</router-link>
<router-view></router-view>
</div>
``js
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<script>
var Home={
template:`
<h1>欢迎来到我的网站</h1>
`
}
var Bag={
template:`
<h1>进入用户页面</h1>
`
}
const routes=[
{path:"/",compontent:Home},
{path:"/home",component:Home},
{path:"/bag",component:Bag}
]
const router=new VueRouter({
routes:routes,
/*linkActiveClass:"active"*/
})
new Vue({
el:".box",
router:router
})
</script>
路由的嵌套
<div class="box">
<router-link to="/home">首页</router-link>
<router-link to="/bag">用户页</router-link>
<router-view></router-view>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<script>
var home={
template:`
<h1>欢迎来到我的网站</h1>
`
}
var bag={
template:`
<div>
<h1>欢迎来到我的用户页</h1>
<ul>
<li>
<router-link to="/bag/zhu">注册</router-link>
</li>
<li>
<router-link to="/bag/deng">登录</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}
var zhu={
template:`
<h1>欢迎来到我的注册</h1>
`
}
var deng={
template:`
<h1>欢迎来到我的登录</h1>
`
}
const routes=[
{path:'/',component:home},
{path:"/home",component:home},
{
path:"/bag",
component:bag,
children:[
{path:"zhu",component:zhu},
{path:"deng",component:deng}
]
}
]
const router=new VueRouter({
routes:routes
})
new Vue({
el:".box",
router:router
})
</script>
不常用的五个标签
v-html 可以识别标签
v-text 不识别标签按文本输入
v-once 只绑定第一次
v-pre 原样输出不对数据进行解译
v-clock 数据没有完全加载之前 加载完v-clock就消失了
<div class="box">
<input type="text" v-model="msg" />
<p v-html="msg">{{msg}}</p>
<h2 v-text="msg">{{msg}}</h2>
<h4 v-once>{{msg}}</h4>
<h6 v-pre>{{msg}}</h6>
<h5 v-cloak>{{msg}}</h5>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
new Vue({
el:".box",
data:{
msg:'hello'
},
beforeMount:function(){
alert('beforeMount')
}
})
</script>
网友评论