关于vue路由router跳转的总结与问题

首先要明白vue就是用的一个个组件来组成一个界面，那么这些界面的切换就要靠router来完成一开始是加载index.html来放上App.vue作为祖组件，其他的组件都可以布置在这个祖组件上
然后我新建了Test.vue与Test2.vue

Test.vue中的是

<template> <div id="name"> <h>{{ msg1 }}</h> </div> </template> <script> // @ is an alias to /src export default { data () { return { msg1:'欢迎' } } } </script> 

Test2.vue

<template> <div class="test2"> 我是Test2页面 </div> </template> 

然后在router中来注册页面
index.js

import Vue from 'vue' import Router from 'vue-router' import VueRouter from 'vue-router' Vue.use(Router) //以下是注册页面 import HelloWorld from '@/components/HelloWorld' import Test2 from '@/components/Test2.vue' import Test from '@/components/Test.vue' //配置访问的路径 const routes=[ { path: '/test', component: Test//这里要注意 }, { path: '/HelloWorld', component: HelloWorld }, { path: '/test2', component: Test2 } ] //实例化vuerouter const router=new VueRouter({ mode:'history', routes }) export default router;//将router抛出，有main.js接回 

main.js

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App.vue' import router from './router/index.js' //导入路由 /* eslint-disable no-new */ //引入路由 new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) 

然后在App.vue中写入router

<template> <div id="app"> <img src="./assets/logo.png"> <h>{{msg1}}</h> <router-view></router-view> <!--路由匹配到的都加在在这里--> <router-link :to="'/test'"><ul>Test</ul></router-link> <router-link to="/test2"><ul>Test2</ul></router-link> </div> </template> <script> </script> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style> 

运行结果的界面


点击Test2

关于我的错误呢是redirect与component的用法不理解造成的
我在index.js中加了一个Helloworld的重定向

{ path:'/goHome', redirect:'/HelloWorld' }, 

在App.vue中加了跳转的按键,点击后出现如下的界面，在Helloworld.vue中，我写进去了欢迎两个字，显示了出来

<router-link to="/goHome"><ul>首页</ul></router-link> 

要注意重定向与component的用法。。。。。。。。。。。。