标签：function -- ref 安装 style oct new 影响 占位符
路由的引用
npm install vue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：（先导入，再注册）
import Vue from ‘vue‘ import VueRouter from ‘vue-router‘ Vue.use(VueRouter)基本使用示例1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>let_const</title> <!-- <link rel="shortcut icon" href="#" /> --> <script src="../lib/vue.js"></script> <script src="../lib/vue-router.js"></script> </head> <div id="app"> <!-- 路由的执行过程 1.先是点a链接触发url地址的改变，然后被route路由监听到，进行路由规则path的匹配。 2.匹配后，展示path对应的component组件 3.将组件放到<router-view></router-view>占位里去 --> <!-- 写法一 不推荐--> <!-- #hash不能丢 --> <!-- <a href="#/login">登录</a> <a href="#/register">注册</a> --> <hr> <!-- 写法二 --> <!-- tag标签可以随意，不影响内部绑定 --> <router-link to="/login" tag="span">登录</router-link> <router-link to="/register">注册</router-link> <!-- 占位符 --> <router-view></router-view> </div> <body> <script> // 组件模板对象 // var login = { // template: ‘<h1>登录组件</h1>‘ // } // // // var register = { // template: ‘<h1>注册组件</h1>‘ // } var login = { template: ‘<h1>登录组件</h1>‘ } var register = { template: ‘<h1>注册组件</h1>‘ } // 组件模板名称 // Vue.component(‘login2‘, { // template: ‘<h1>登录组件</h1>‘ // }) var routerObj = new VueRouter({ // 路由匹配规则 routes: [ // 注意：component必须是一个组件对象，不是组件模板名称 // redirect重定向,默认指定根路径 // 如果不写，默认进来是空白的根路径，不合理 // { path: ‘/‘, redirect: ‘/login‘ }, { path: ‘/login‘, component: login }, { path: ‘/register‘, component: register } ] }) new Vue({ el: "#app", data: {}, methods: {}, router: routerObj }) </script> </body> </html>
标签：function -- ref 安装 style oct new 影响 占位符
原文地址：https://www.cnblogs.com/webcode/p/10976766.html
