一、路由：
1、后端路由：
对于普通网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
2、前端路由：
对于单页面应用程序来说，主要通过URL中的hash(#号）来实现不同页面之间的切换，同时，hash之间有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
3、在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由！！！
二、安装：
官网：https://router.vuejs.org/zh/installation.html
JS：https://unpkg.com/vue-router/dist/vue-router.js
三、使用：
1、导入及创建对象：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0"/>
<metahttp-equiv="X-UA-Compatible"content="ie=edge"/>
<title>路由</title>
<scriptsrc="./lib/vue.js"></script>
<!--1.安装vue-router路由模块-->
<scriptsrc="./lib/vue-router.js"></script>
<style></style>
</head>
<body>
<divid="app">
<!--<ahref="#/login">登录</a>
<ahref="#/register">注册</a>-->
<!--router-link默认渲染成一个a标签-->
<router-linkto="/login"tag="span">登录</router-link>
<router-linkto="/register">注册</router-link>
<!--这是vue-router提供的元素，专门用来当做占位符的，将来，
路由规则，匹配到的组件，就会展示到这个router-view中去-->
<!--我们可以把router-view认为是一个占位符“留坑”-->
<router-view></router-view>
</div>
<script>
varlogin={
template:"<h1>登录组件</h1>"
};
varregister={
template:"<h1>注册组件</h1>"
};
//2.创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了
//一个路由的构造函数，叫做VueRouter
//在new路由对象的时候，可以为构造函数，传递一个配置对象
varrouterObj=newVueRouter({
//route这个配置对象中的route表示【路由匹配规则】的意思
routes:[
//路由匹配规则
//每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
//属性1：path表示监听哪个路由链接地址
//属性2：component表示，如果路由是前面匹配到的path，则展示component属性对应的那个组件
//component的属性值，必须是一个组件的模板对象，不能是组件的引用名称
{path:"/login",component:login},
{path:"/register",component:register}
]
});
varvm=newVue({
el:"#app",
data:{},
methods:{},
//将路由规则对象，注册到VM实例上，用来监听url地址的变化，然后展示对应的组件
router:routerObj
});
</script>
</body>
</html>
2、重定向（打开时默认导向的位置：可以在地址栏上查看区别）
{path:"/",redirect:"/login"},
例子中，是默认打开时就导向login页面
3、设置路由高亮的方式（两种：第二种直接样式里定义即可）：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1.0"/>
<metahttp-equiv="X-UA-Compatible"content="ie=edge"/>
<title>路由</title>
<scriptsrc="./lib/vue.js"></script>
<!--1.安装vue-router路由模块-->
<scriptsrc="./lib/vue-router.js"></script>
<style>
/*2.第二种设置路由高亮的方式---直接设置，不需要再定义*/
.router-link-active{
color:red;
font-weight:800;
font-style:italic;
font-size:80px;
text-decoration:underline;
background-color:green;
}
/*1.1第一种设置路由高亮的方式--需要定义下*/
.myactive{
color:red;
font-weight:800;
font-style:italic;
font-size:80px;
text-decoration:underline;
background-color:green;
}
</style>
</head>
<body>
<divid="app">
<!--<ahref="#/login">登录</a>
<ahref="#/register">注册</a>-->
<!--router-link默认渲染成一个a标签-->
<router-linkto="/login">登录</router-link>
<router-linkto="/register">注册</router-link>
<!--这是vue-router提供的元素，专门用来当做占位符的，将来，
路由规则，匹配到的组件，就会展示到这个router-view中去-->
<!--我们可以把router-view认为是一个占位符“留坑”-->
<router-view></router-view>
</div>
<script>
varlogin={
template:"<h1>登录组件</h1>"
};
varregister={
template:"<h1>注册组件</h1>"
};
//2.创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了
//一个路由的构造函数，叫做VueRouter
//在new路由对象的时候，可以为构造函数，传递一个配置对象
varrouterObj=newVueRouter({
//route这个配置对象中的route表示【路由匹配规则】的意思
routes:[
//路由匹配规则
//每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
//属性1：path表示监听哪个路由链接地址
//属性2：component表示，如果路由是前面匹配到的path，则展示component属性对应的那个组件
//component的属性值，必须是一个组件的模板对象，不能是组件的引用名称
//redirect是重定向，定义打开页面的默认的导向哪个页面，可以在地址栏中具体查看
{path:"/",redirect:"/login"},
{path:"/login",component:login},
{path:"/register",component:register}
]
//1.2第一种设置路由高亮的方式--需要定义的部分
//linkActiveClass:"myactive"
});
varvm=newVue({
el:"#app",
data:{},
methods:{},
//将路由规则对象，注册到VM实例上，用来监听url地址的变化，然后展示对应的组件
router:routerObj
});
</script>
</body>
</html>
4、设置路由的动画：
样式内加上：
.v-enter,
.v-leave-to{
opacity:0;
transform:translateX(150px);
}
.v-enter-active,
.v-leave-active{
transition:all0.8sease;
}
然后：
<transitionmode="out-in">
<router-view></router-view>
</transition>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56513.shtml
