Vue路由

最新推荐文章于 2024-07-05 15:05:21 发布

黄尚炎

最新推荐文章于 2024-07-05 15:05:21 发布

阅读量153

点赞数

分类专栏： Vue 文章标签： Vue路由

本文链接：https://blog.csdn.net/weixin_44702125/article/details/89383921

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
安装
安装
1.直接下载
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
2.NPM
npm install vue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)

举例：直接下载使用：

<html>
<head>

<script src="./lib/vue.min.js">
<script src="./lib/vue-router.js">
<style>
/默认路由激活值：router-link-active/
.router-link-active,.myActive{
color:white;
background-color:blue;
}
</style>
</head>
<div id=“app”>

<a href="#/login">登录
<a href="#/register">注册
<router-view>
<!–方式二：router-link 标签默认会渲染成a标签，可以使用–
tag属性设置渲染成指定的标签–>

<router-link to="/login?account=admin&password=123456" tag=“span”>登录

<router-link to="/register/admin">注册
<router-view>
</div>
<body>
</body>
<script>
//使用 vue.js
//组件
var login=Vue.extend({
template:‘

登录 {{ $KaTeX parse error: Expected 'EOF', got '}' at position 20: \dotse.query.account}̲} </h1>',creat\dots$ route.query.account);
}
});
var register=Vue.component(‘register’,{
template:‘

注册 {{ $KaTeX parse error: Expected 'EOF', got '}' at position 22: \dotsparams .account}̲} </h1>'//html结\dots$ route.params );
}
});
//创建路由
var routerObj=new VueRouter({
//设置路由规则
routes:[
{path:’/’,redirect:’/login’},//从定向
{path:’/login’,component:login},
{path:’/register/:account’,component:register},
{path:’/index’,components:{ //加载多个组件,与 router-view标签的name属性值结合使用
‘login’:login,//键值与 router-view标签的name属性值匹配
‘register’:register;
}}
],linkActiveClass:‘myActive’ //设置激活属性值

	});
	//创建 Vue对象
	var  vm=new Vue({
		el:'#app',//表示这个vm对象要控制的标签
		data:{
			
		}, //存放要用的数据
		methods:{ //设置事件，对应的函数
			
		},
		router:routerObj//绑定路由
	});
\</script>

</html>