vue路由html,vue路由.html

.myActiveClass{

color: red;

font-weight: 800;

font-style: italic;

font-size: 20px;

text-decoration: underline;

background-color: green;

padding: 20px;

}

.v-enter,

.v-leave-to{

opacity: 0;

transform: translateX(200px);

}

.v-enter-active,.v-leave-active{

transition: all 0.8s ease;

}

登录

注册

这是login组件

//后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

//前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

//在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由(区别于后端路由)；

//导入路由的包之后，就在window中有了一个路由的构造函数叫做VueRouter

var login = {

template:'#login',

}

var register = {

template: '

注册组件

'

}

//在实例化一个路由对象的时候，可以 为构造函数传递一个 配置对象

var routerObj = new VueRouter({

//route 这个配置对象 的 route 表示路由匹配规则；

routes:[//路由匹配规则

// 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：

// 属性1 是 path， 表示监听 哪个路由链接地址；

// 属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件

// 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；

// { path: '/', component: login },

{ path: '/', redirect: '/login' }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事，【重定向】

{ path: '/login', component: login },

{ path: '/register', component: register }

],

linkActiveClass:"myActiveClass",

});

var app = new Vue({

el:'#app',

data:{

},

methods:{

},

router:routerObj,//将实例化的路由对象，注册到vue实例上，用来监听url地址的变化 ，然后展示对应的组件

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史