|
禁止伸缩：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
?Vue路由：
vue-router依赖于vue
router-link：实现页面跳转?to书写跳转的路径?路径值自定义?前面一定要加/。vue中没有a标签
router-link最终渲染成了a ， 当前点击的router-link有router-link-exact-active?router-link-active。
跳转页面的内容渲染到router-view内部。
<style>
.router-link-exact-active{
background-color: red;
color:red;
}
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
<ul>
<li>
<router-link to="/index">首页</router-link>
</li>
<li>
<!-- router-link实现页面跳转 -->
<router-link to="/type">分类</router-link>
</li>
</ul>
</div>
<template id="index">
<h1>这是首页页面</h1>
</template>
<template id="type">
<h1>这是分类页面</h1>
</template>
</body>
书写路由：
配置路线 ：routes
path：对应的是?router-link中的to（组件渲染到router-view内部）
redirect重定向
挂载路由?如果属性和值一样可以简写?属性, （router:router）
<script src="js/vue.js"></script>
<!-- 按需引入，需要的时候再引入 -->
<script src="js/vue-router.js"></script>
<script>
var index={
template:'#index'
}
var type={
template:'#type'
}
// 书写路由
var router=new VueRouter({
// 配置路线
routes:[
{
// path对应的是 router-link中的to
path:'/index',
component:index
},
{
path:'/type',
component:type
},
{
// /*以上所有的都不符合
path:'/*',
redirect:'/index'
}
]
})
new Vue({
el:'#app',
// router:router
router,
})
</script>
路由嵌套：
配置子路由的时候一定要注意，当前的组件内部一定要有router-view。
内部会渲染到该组件内部的router-view内部。
子路由也可以配置到第一层路径下，内容会渲染到第一层的router-view内部。
|