- <body>
- <div id="itany">
- <div>
- <!-- 使用 router-link 组件来定义导航, to 属性指定链接 url-->
- <router-link to="/home"> 主页 </router-link>
- <router-link to="/news"> 新闻 </router-link>
- </div>
- <!--router-view 用来显示路由内容 -->
- <router-view></router-view>
- </div>
- </body>
- </html>
- <script>
- // 1. 定义组件
- var Home={
- template:'<h3 > 我是主页 </h3>'
- }
- var News={
- template:'<h3 > 我是新闻 </h3>'
- }
- // 2. 配置路由
- const routes=[
- {path:'/home',component:Home},
- {path:'/news',component:News},
- {path:'*',redirect:'/home'}// 重定向, 即默认的情况下打来 home 组件;
- ]
- // 3. 创建路由实例
- const router=new vueRouter({
- routes,
- linkActiveClass:'active'// 更新活动链接的 class 类名
- });
- // 4. 创建根实例并将路由挂载到 vue 实例上
- new Vue({
- el:'#itany',
- router// 注入路由
- })
- </script>
来源: http://www.bubuko.com/infodetail-2609520.html