使用 vuerouter 完成单页面跳转

Advanced/vuedemo02/src/App.vue

@@ -1,12 +1,14 @@
 <template>
 	<div id="app">
 		<h2 class="css_title">{{msg}}</h2>
-		<v-home></v-home>
+		<router-link to="/home">首页</router-link>
+		<router-link to="/news">新闻</router-link>
+		<hr>
+		<router-view></router-view>
 	</div>
 </template>
 
 <script>
-	import Home from './components/Home.vue';
 	export default {
 		name: 'app',
 		data() {
@@ -17,19 +19,17 @@
 		},
 		methods: {
 
-		},
-		components: {
-			'v-home': Home,
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-/*css  局部作用域  scoped*/
+	/*css  局部作用域  scoped*/
 	#app {
 		.css_title {
 			color: red;
 		}
+
 		.css_title2 {
 			color: #008000;
 		}

Advanced/vuedemo02/src/components/Home.vue

@@ -1,35 +1,25 @@
 <template>
-	<!-- 所有的内容要被根节点包含起来 -->
-	<div id="home">
-		<v-header ref="header"></v-header>
-		<hr>
-		首页组件
-		<button @click="getChildData()">获取子组件的数据和方法</button>
-	</div>
+    <!-- 所有的内容要被根节点包含起来 -->
+    <div id="home">    
+       我是首页组件
+
+        <ul>
+            <li v-for="(item,key) in list">
+                <router-link :to="'/pcontent?id='+key">{{key}}--{{item}}</router-link>
+            </li>
+        </ul>
+    </div>
 </template>
 
+
 <script>
-	import Header from './Home/Header.vue';
-	export default {
-		data() {
-			return {
-				msg: '我是一个home组件',
-				title: '首页111'
-			}
-		},
-		components: {
+    export default{
+        data(){
+            return {               
+               msg:'我是一个home组件',
+               list:['商品111111','商品222222','商品333333']    
+            }
+        }
+    }
 
-			'v-header': Header
-		},
-		methods: {
-			run() {
-				alert('我是Home组件的run方法');
-			},
-			getChildData() {
-				//父组件主动获取子组件的数据和方法：
-				// alert(this.$refs.header.msg);
-				this.$refs.header.run();
-			}
-		}
-	}
 </script>