此案例包含一级路由,路由前置守卫,props正向传值等知识点,
基本功能是:用户未登录,踢回登录页面,点击新闻列表,跳转相应新闻详情
相关代码如下:
需要下载vue和vue-router
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/vue-router/dist/vue-router.min.js"></script>
<style>
a{
margin-left:5px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="demo">
<!-- 父传子 在子组件被调用的时候传入值 -->
<com :obj="arr"></com>
<router-view></router-view>
</div>
<template id="tema">
<div>
<p>首页</p>
</div>
</template>
<template id="temb">
<div>
<div v-for="(v,i) in news">
<router-link :to="{name:'detail',params:{id:v.id}}">{
{v.title}}</router-link>
</div>
</div>
</template>
<template id="temc">
<div>
<h1>{
{text[0].title}}</h1>
<p>{
{text[0].con}}</p>
</div>
</template>
<template id="temd">
<div>
<p>登录</p>
</div>
</template>
<template id="tem">
<div>
<span v-for="(v,i) in obj">
<router-link