vue路由 $router跳转

vue路由 $router跳转

router-link标签与a标签的区别是router-link跳转不需要刷新页面

页面跳转：
在src/views里新建项目文件夹,新建vue文件

<templent>
	<div>
		<!-- 第一种：this.$router.push() (函数里面调用) -->
		<el-button type="primary"  @click="rout()">$router</el-button>
		<!-- 第二种：router-link -->
		<router-link to="/Edit">router</router-link>
	</div>
</templent>

<script>
	export default{
		methods:{
			rout(){
		      this.$router.push({path:'/Edit'})
		    },
		}
	}
</script>

在router/index.js文件里配置路由

//用import引入组件
import edit from '@/views/Edit'

const router = new Router({
  routes: [
  	//配置路由路径及其跳转的组件
    {
      path: '/',
      name: '首页',
      component: Home,
      //二级路由
      children: [
        {
          path: '/Edit',
          name: 'Edit',
          component: edit
        }
      ]
    },
  ]
})