vue笔记------router

最新推荐文章于 2023-12-05 22:54:15 发布

demi_meng

最新推荐文章于 2023-12-05 22:54:15 发布

阅读量221

点赞数

本文链接：https://blog.csdn.net/qq_34530330/article/details/69525957

版权

vue2.0中队router有些改变

标签变为router-link 要跳转到哪里通过to的属性值来改变

同时去掉了router.map函数关联需要通过const routes = [{ path:'要跳转的地方'，conponent:'组件名'}]

创建router实例的时候要将上面的参数传进去const router = new VueRouter({routes:routes});

最后启动路由const app = new Vue({router:router}).mount('#box');

router.redirect也不能用了所以默认要显示的组件可以在routes中表明即const routes =[{'path':'/',conponent:'组件名'}]

例子：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/vue-resource.js"></script>
<body>
<div id="box">
<ul>

<li>
<router-link to='/home'>主页</router-link>
</li>
<li>
<router-link to='/news'>新闻</router-link>
</li>
</ul>
<div>
<router-view></router-view>
</div>

</div>
<script>
//1. Home News组件都准备
var Home = Vue.extend({
template:'<h3>我是主页</h3>'
})
var News = Vue.extend({
template:'<h3>我是新闻</h3>'
})
//2.关联
const routes = [
{ path: '/home' , component: Home },
{ path: '/news' , component: News }
]
//3创建router实例，然后传router配置
const router = new VueRouter({ routes:routes });
//4.启动路由
const app = new Vue({ router:router }).$mount('#box');
</script>

</body>
</html>

默认情况下显示哪一个组件可以通过routes中的参数配置

demi_meng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue笔记------router

vue2.0中队router有些改变标签变为router-link 要跳转到哪里通过to的属性值来改变同时去掉了router.map函数关联需要通过const routes = [{ path:'要跳转的地方'，conponent:'组件名'}]创建router实例的时候要将上面的参数传进去const router = new VueRouter({routes:routes});
复制链接

扫一扫