text [简单的vue路由器] #js #vue #javascript

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了text [简单的vue路由器] #js #vue #javascript相关的知识，希望对你有一定的参考价值。

<html>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <router-link to="/">home</router-link>
  <router-link to="/about">about</router-link>
  <router-link to="/something">no route</router-link>
  <router-view></router-view>
</div>



<script>


const NotfoundComponent = {
	template: '<h1>Not found</h1>'
};

const HomeComponent = {
	template: '<h1>Home</h1>'
};

const AboutComponent = {
	template: '<h1>About</h1>'
};

const routes = [
	{
  	path: '/',
  	component: HomeComponent
  },
  {
  	path: '/about',
  	component: AboutComponent
  },
  {
  	path: '*',
    component: NotfoundComponent
  }
];

const router = new VueRouter({
	routes
});

new Vue({
	el: '#app',
	router
});
</script>


</html>

以上是关于text [简单的vue路由器] #js #vue #javascript的主要内容，如果未能解决你的问题，请参考以下文章

text Vue.js重定向路由

vue.js路由vue-router——简单路由基础

vue.js路由参数简单实例讲解------简单易懂

vue2.0路由嵌套

来自ajax请求的Vue.JS路由器链接参数

如何通过使用 Vue.js 中的路由器概念单击按钮来简单地从一个组件（主页）导航到另一个组件